Since last update of Chrome to version 91, I have a bug in calculation of heights with my flexbox elements.
I have a large table which is managed by a container which takes the rest of the page as its height (with flex 1). But since Chrome 91, the height of the container is out of range.
Note that this problem occurs because of a nested row flex.
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
.header {
height: 30px;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.flex1 {
flex: 1;
}
.container {
overflow: auto;
}
table {
border: 1px solid black;
height: 0;
width: 100%;
}<div class="column flex1">
<div class="header">
Header
</div>
<div class="row flex1">
<div class="column flex1">
Left part
</div>
<div class="column flex1">
<div>
Header Table
</div>
<div class="container column flex1">
<table>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
<tr><td>Value</td></tr>
</table>
</div>
</div>
</div>
</div>