I have the following html (JSFiddle):
<div class="d-flex" style="max-width: 1460px;">
<div style="width: 100%; background: red;">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
2
</div>
</div>
As you can see from the JSFiddle, the content is being pushed off screen to the right even though I am using the responsive table class. The layout is supposed to be main content + sidebar content, but the sidebar content is being pushed off screen for some reason. Could someone point me in the right direction please?
2
Answers
Flex doesn’t like its item with
width
and would rather handle that on its own.So I removed one div with
width: 100%
and it worked.The sidebar is being pushed off the side of the viewport because of:
width: 100%
on the.table-responsive
element’s<div>
parent.min-width: min-content
by default in a horizontal flex layout.Consider removing the
width: 100%
and applymin-width: 0
to override themin-width: min-content
.