Issue
I am having some trouble with having a table inside a flexbox layout bleeding outside the parent flexbox making the page wider than the browser width. This is kind of a mockup showing the similar problem that I am having.
#flex {
display:flex;
display:-webkit-flex;
flex-direction: row;
}
#one {
background-color: black;
width: 300px;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
#two {
background-color:red;
}
<div id="flex">
<div id="one">one
</div>
<div>
<table>
<tr>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
<td>Fourth Row</td>
<td>Fifth Row</td>
<td>Sixth Row</td>
<td>Seventh Row</td>
<td>Eighth Row</td>
<td>Ninth Row</td>
<td>Tenth Row</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</div>
</div>
You can see that even though .flex
is just the width of the screen, .two
is much wider.
I am using datatables inside the second div so the table size is dynamic, and even with setting max widths to the child and everything, I cannot get it to stop bleeding out. I need help figuring out how I can lock down the second div of the flexbox to let the table resize correctly (it has responsive elements, but doesn't get used b/c it just goes wide).
edit: It seems like the table is doing the full 100% width of the page, but then is going outside the margin on the right side because of the element on the left.
Thanks for the help.
Solution
First, set the body:
body {
width:100vw;
height:100vh;
margin: 0px;
}
Then, let the biggest container #flex { max-width: 100%;
and your table { word-break: break-all;
Answered By - L777
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.