I have a problem with IE11: I'd like the tabbar
to occupy the height that it needs, one or more rows.
The table should occupy the remaining height and display both horizontal and vertical scrollbar.
The problem occurs when width is too narrow and buttons are wrapped into the second, third,... line.
Is there another way to make this work in IE11 ?
#container {
display: flex;
display: -ms-flexbox;
flex-direction: column;
height: 100vh;
}
.tabbar {
display: block;
text-align: left;
list-style-type: none;
}
.tabbar li {
display: inline-block;
background-color:#ddd;
font-size:30px;
padding:10px 20px;
margin:5px;
}
table {
display: block;
flex: 1 1 auto;
font-size: 16px;
min-height: 100px;
overflow: scroll;
background-color:orange;
}
<div id="container">
<ul class="tabbar">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
</table>
</div>
IE11 is allowing the ul.tabbar
flex item to shrink below the size of its content (the list items).
The list items are overflowing the ul
and overlapping the table underneath.
To see this effect in IE11, add a border or overflow: hidden
to .tabbar
.
Other browsers don't let the container shrink below the size of their content.
To fix it, add this to your code:
.tabbar { flex-shrink: 0; }
#container {
display: flex;
display: -ms-flexbox;
flex-direction: column;
height: 100vh;
}
.tabbar {
display: block;
text-align: left;
list-style-type: none;
flex-shrink: 0;
border: 1px dashed red;
}
.tabbar li {
display: inline-block;
background-color: #ddd;
font-size: 30px;
padding: 10px 20px;
margin: 5px;
}
table {
display: block;
flex: 1 1 auto;
font-size: 16px;
min-height: 100px;
overflow: scroll;
background-color: orange;
}
<div id="container">
<ul class="tabbar">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<table>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With