Test ellipsis inside flexbox

<!DOCTYPE html>
<html>

  <head>
    <style>
      
    .topbar {
       display: flex;
       flex-direction: row;
       width: 100vw;
    }
      
    .icon {
       flex-grow: 0;
       flex-shrink: 0;
    }
    
    .tabs {
       flex-grow: 1;
       flex-shrink: 1;
       min-width: 0;

       font-size: 18pt;
       display: flex;
       flex-direction: row;
    }
    
    .tabs > div {
      flex-basis: 5em;
      flex-grow: 0;
      flex-shrink: 1;
      
      display: flex;
      flex-direction: row;
      
      overflow: hidden;
    }
    
    .tabs > div > span {
      flex-grow: 0;
      flex-shrink: 1;
      
      border: 1px solid;

      min-width: 0;      
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
      
    </style>
  </head>

  <body>
    <h1>Test proper ellipsis when shrinked in flex</h1>

 <div class="topbar">
  <div class="icon" >a</div>
  <div class="tabs">
     <div>
       <span>Long text long</span>
     </div>
     <div>
       <span>Long text 2</span>
     </div>
     <div>
       <span>Long text</span>
     </div>
     <div>
       <span>Long text 3</span>
     </div>
     <div>
       <span>Long text</span>
     </div>
     <div>
       <span>Long text 4</span>
     </div>
  </div>
  <div class="icon" >a</div>
 </div>
</body>

</html>

/* Styles go here */