CSS Flexbox with tables as items

Question

I would like to use CSS flexbox on a containing DIV of two tables, and making one of the tables fill the available space using flex-grow. However, it doesn't grow. It seems as though this is because the tables aren't block display elements. I have it working if I wrap the TABLEs inside DIVs. However, I wonder if there is anyway to get this to work without the extra DIVs?

Below is an example - the first container is without the DIVS, the second is with DIVs and has the desirable layout.

div.container {
    display: flex;
    background-color: red;
}

#nodivs table:first-child {
    background-color: green;
}

#nodivs table:last-child {
    background-color: blue;
    flex-grow: 1;
}



#divs div:first-child {
    background-color: green;
}

#divs div:last-child {
    background-color: blue;
    flex-grow: 1;
}
#divs div:last-child table {
    width: 100%
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table>
</div>
<br><br>
<div id="divs" class="container">
    <div><table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table></div>
    <div><table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table></div>
</div>

Answer 1

As explained in https://bugzilla.mozilla.org/show_bug.cgi?id=1455976, this problem is a bug. This bug is fixed in a newer version of browsers. I explain a trick to solve this problem in older browsers.

This trick converts <table> display to block and converts its <tbody> display to table and applies width 100% to <tbody>. In this trick you can use single <tbody>, <thead>, <tfoot> in <table> tag or even using <tr> directly in <table> tags. Known problem of this method is using two or more <tbody>, <thead> or <tfoot> in one <table> that cause messed up columns.

div.container {
    display: flex;
    background-color: red;  
}

div.container table{
    display: block;
    width: auto;
}

div.container thead, div.container tbody, div.container tfoot{
    width: 100%;
    display: table;
}

#nodivs table:first-child {
    background-color: green;
}

#nodivs table:last-child {
    background-color: blue;
    flex-grow: 1;
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1 AAAA</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </tbody>        
    </table>
</div>

Answer 2

Took me a while but I think i got it, not that it matters much at this point :D

I made each element in 2nd table flex and added flex: 1 to them. I made the first table flex: 0;

Flex-grow: 1 should work for all the flex: 1's as well but a little differently, barely noticeable.

div.container {
    display: flex;
    background-color: red;
}

#nodivs table:first-child {
    display: flex;
    flex: 0;
    background-color: orange;
}

#nodivs table:last-child {
    display: flex;
    flex: 1;
    background-color: green;
}
#nodivs table:last-child thead {
   display: flex;
   flex: 1;
   background-color: red;
}
#nodivs table:last-child tr {
    display: flex;
    flex: 1;
    background-color: white;
}
#nodivs table:last-child th {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: blue;
}



#divs div:first-child {
    background-color: green;
}

#divs div:last-child {
    background-color: blue;
    flex-grow: 1;
}
#divs div:last-child table {
    width: 100%
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table>
</div>
<br><br>
<div id="divs" class="container">
    <div><table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table></div>
    <div><table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table></div>
</div>