I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width).
Due to being nested within another div, absolute measures like 100% are not feasible.
In my code snippet below, removing flex-grow:1 from tr does not alter anything. However, if I then remove display:flex from t, the table no longer stretches to fit the div. It's quite perplexing, even when trying different combinations of display:flex and flex-grow:1 down to td2.
Please refrain from suggesting to avoid tables for formatting, as in many cases, tables are unmatched in their utility.
#d {
background-color:blue;
padding:2px;
width:400px;
display:flex;
}
#t {
background-color:red;
padding:2px;
flex-grow:1;
display:flex;
}
#tr {
background-color:green;
flex-grow:1;
}<div id='d'>
<table id='t'>
<tr id='tr'>
<td id='td1'>col1</td>
<td id='td2'><input type='text'></td>
</tr>
</table>
</div>