CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 816

Table inside Flexbox Wider than the Page

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.

Upvotes: 13

Views: 14063

Answers (4)

d.i.joe
d.i.joe

Reputation: 709

In my situation, I have a table with table-layout: fixed that is wrapped up by another div inside of a flexbox child. In this case, you have to constrain the immediate flexbox child by applying min-width or overflow. The example below uses min-width. Without it, the overflow in div with class childofchild2 will not work.

div {
  border: solid 1px;
}

.parent {
  display: flex;
  width: 100%;
}

.child1 {
  width: 50px;
}

.child2 {
  flex: 1;
  min-width: 0;
}

.childofchild2 {
  overflow-x: scroll;
}

.child3 {
  width: 50px;
}

table {
  table-layout: fixed;
}

table td {
  border: solid 1px;
}

td {
  width: 1000px;
  white-space: nowrap; 
}
<div class="parent">
  <div class="child1">Left</div>
  <div class="child2">
    <div class="childofchild2">
      <table>
        <tr>
          <td>First Column</td>
          <td>Second Column</td>
          <td>Third Column</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data </td>
          <td>Data</td>
        </tr>
      </table>
    </div>
  </div>
  <div class=`enter code here`"child3">Right</div>
</div>

Upvotes: 0

cupok
cupok

Reputation: 31

In my case, table was an indirect descendant of flex, so
<div class="table-wrapper" style="overflow: auto;"><table></table></div> - doesn't work (page still overflowed by table)
Solution is to put overflow: auto; on the direct flex child

Upvotes: 3

mesqueeb
mesqueeb

Reputation: 6314

The answer above didn't work for me, but what did work:

I had problems because the two tables were directly into the flexbox container. Apparently the tables automatically take the same size that the div surrounding it, even though this is a flexbox container...

So, Just put two div's inside your flexbox and put the table inside the div:

<div style="display:flex;">
    <div><table> table content </table></div>
    <div><table> table content </table></div>
</div>

Then if you still have problems, make sure your table has this CSS:

table{
  width: 100% !important;
  table-layout: fixed;
  word-break: break-word;
}

Upvotes: 10

L777
L777

Reputation: 8457

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;

codepen

Upvotes: 8

Related Questions