All geek questions in one place

Lines overlapping in IE11 with display: flex

I have a problem with IE11: I would like it to tabbartake the desired height, one or more lines.

The table should occupy the remaining height and display a horizontal and vertical scroll bar.

The problem occurs when the width is too narrow, and the buttons are enclosed in a second, third, ... line.

Is there any other 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>
Run codeHide result
+4
source share
1 answer

IE11 allows the size of a ul.tabbarflex element to decrease below the size of its content (list items).

ul .

IE11, overflow: hidden .tabbar.

.

, :

.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>
Hide result
+8

Source: https://habr.com/ru/post/1655733/

More articles:


All Articles