flex whitespace nowrap list break

an overflowing list with whote-space nowrap breaks flex-box layout

by Pieter Biesemans

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="body">
 <div id="shell">
      <div id="left">
          <div id="nav">
            - menu -
          </div>
          <div id="help-toggle">
            help toggle
          </div>
          <div id="nav-toggle">
            nav toggle
          </div>
          <div id="list-toggle">
            list whitespace toggle
          </div>
      </div>
      <div id="mid">
          <div id="mid-top">
                - mid top -
          </div>
          <div id="mid-bottom">
               - mid bottom- <br><br>
               <div id="list">
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
               </div>
               <hr>
               <div id="secondlist">
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
               </div>
          </div>
      </div>
 </div>
 <div id="help-pane" class="visible">
   -...

CSS

body,html{width:100%;height:100%;overflow:hidden;}

#body{
  display:flex;
  flex-flow:row nowrap;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background-color:#abc;
  overflow:hidden;
}

#shell{
  flex: 1 1 auto;
  display:flex;
  flex-flow:row nowrap;
  position:relative;
  width:100%;
  min-height:100%;
}

  #left{
    flex: 0 0 180px;
    min-height:100%;
    background:lightblue;
  }
  #left.collapsed{
    flex: 0 0 80px;
  }
  
  #mid{
    flex: 1 1 auto;
    min-height:100%;
    min-width: 0;
    display:flex;
    flex-flow:column nowrap;
    align-items:stretch;
    align-content:stretch;
    position:relative;
    width:100%;
    min-height:100vh;
    background:purple;
  }
      #mid-top{
        flex: 0 0 auto;
        min-height:100px;
        background:green;
      }
      #mid-bottom{
        min-height:calc(100% - 100px);
        flex: 1 1 auto;
        background:lightgreen;
      }
      #list{
        overflow: auto;
        width: 100%;
        max-width: 100%;
      }
      #list.nowrap{
        white-space: nowrap;
      }
      #secondlist{
        overflow: auto;
        max-width: 250px;
        white-space: nowrap;
      }
      .list-item{
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 2px;
        background: purple;
      }
      
#help-pane{
  display:none;
  flex: 0 0 0px;
  background:red;
}
#help-pane.visible{
  display:inherit;
  flex:0 0 180px;
}

JavaScript

$('#nav-toggle').on('click',function(){
	$(this).parent().toggleClass('collapsed');
});
$('#help-toggle').on('click',function(){
	$('#help-pane').toggleClass('visible');
});
$('#list-toggle').on('click',function(){
	$('#list').toggleClass('nowrap');
});