Table inside Flexbox Wider than the Page

Question

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.

yeah... not really sure what you were expecting. 110% is wider than 100% and will then overflow. — Joseph Marikle, Feb 26 '16 at 19:08
I think you should put the real elements on this example instead of this 110% div. — L777, Feb 26 '16 at 19:08
Ah. I feel dumb now. It's just to simulate the overly wide content from the actual code. The trouble is that it's hard to tell what's making it overflow or if there's anything that can be done to fix it without the actual code that's causing the problem. Please provide a more complete example. — Joseph Marikle, Feb 26 '16 at 19:10
Kk, let me try and make a better example. Essentially, it is the datatables javascript that when it builds the table, it is making it too wide. — David, Feb 26 '16 at 19:17
Usualy tables arent responsive, they only gets a scroll on small screens... — L777, Feb 26 '16 at 19:19
@JosephMarikle ok added an update. See how the extra data in the table causes it to bleed to the right? My table does the same. It has responsive elements that are supposed to shrink it, but it doesn't feel those constraints. Also, If i delete the element on the left, everything works just fine, so its only when that element exists it bleeds out — David, Feb 26 '16 at 19:25
@David I see. Is it character data that is causing the bleed? If it's something that doesn't really need to be broken up logically, freestock.tk's suggestion would work. Maybe add it to the offending cell or column? This is basically what I'm suggesting but without inlining the style: http://codepen.io/jmarikle/pen/mPdeRy — Joseph Marikle, Feb 26 '16 at 19:32

mesqueeb · Answer 1 · 2018-02-12T01:48:24.837

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;
}

L777 · Accepted Answer · 2016-02-26T19:45:43.103

8

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

edited Feb 26 '16 at 19:45

answered Feb 26 '16 at 19:28

L777

7,719
3
38
63

@David about the word wrap, [**check this**](http://stackoverflow.com/questions/35378970/word-break-prefer-normal-but-if-not-possible-break-all) – L777 Feb 26 '16 at 23:20

score 0 · Answer 3 · answered Mar 23 '21 at 05:31

0

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

answered Mar 23 '21 at 05:31

cupok

1

Table inside Flexbox Wider than the Page

3 Answers3