White-Space: Nowrap Is Not Working in Ie in a Horizontally Scrolling Box

Width of element with 'white-space: nowrap' doesn't adjust to child content

Add this line to .pane

display: inline-block;

CSS div nowrap not working in IE

Ok, i got the problem now.

the li element has to be inline-block instead of float left and the ul whitespace nowrap ... this way it will be rendered fine in ie.

white-space: nowrap breaks flexbox layout

This is caused by the default flex-box behaviour, which prevents flex-boxes of becoming smaller than it's contents.

The solution to this issue is setting min-width: 0 (or min-height: 0 for columns) to all parent flex-boxes.
In this specific case (and in the fiddle):

#shell{
  flex: 1 1 auto;
  display:flex;
  flex-flow:row nowrap;
  position:relative;
  width:100%;
  min-height:100%;
  min-width: 0; /* this one right here does it!*/
} 

---

$('#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');});

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%;  min-width: 0;}
  #left{    flex: 0 0 180px;    min-height:100%;    min-width: 0;    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;    min-width: 0;    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;      }      .list-item.odd{        background: violet;      }      #help-pane{  display:none;  flex: 0 0 0px;  background:red;}#help-pane.visible{  display:inherit;  flex:0 0 180px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>               </div>               <hr>               <div id="secondlist">                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>               </div>          </div>      </div> </div> <div id="help-pane" class="visible">   - help-pane - </div></div>

---

Related Topics