white-space：nowrap打破flexbox布局

Question

我使用Flexbox为应用创建了响应式布局。 布局要求左侧是可折叠菜单，中间是一个带有标题和正文的块，右侧是可切换的帮助窗格（还有更多内容，但这是基本结构）。

左侧菜单有两种状态：180px宽或80 px宽。帮助窗格隐藏或占用180px。中间的盒子占据了剩下的空间。 Flexbox就像一个魅力。

当我使用white-space: nowrap制作滚动div时，麻烦就开始了。我有一堆需要在水平滚动条中显示的项目，所以我有一个包含项目的列表div，设置为overflow:auto和white-space: nowrap。

通常这就像一个魅力，但现在它打破了我的flex布局。滚动器不会占用父（flex）div的宽度，而是使div更宽，从而将帮助窗格推出界限。

以下小提琴说明了这个问题：

http://jsfiddle.net/PieBie/6y291fud/

您可以通过单击菜单栏中的切换帮助来切换帮助窗格。 通过单击菜单中的列表空白切换重新创建此问题，这会切换列表的white-space: no-wrap CSS属性。如果帮助窗格已打开，您可以看到它被推出界限。

底部列表是我想要实现的，但我希望它是其父级的全宽。

我可以在Chrome，Firefox，Opera，Vivaldi和Edge中重现这个问题。 Internet Explorer 11播放效果很好（°_°）。我更喜欢纯CSS解决方案（SCSS也是一个选项），但如果需要，我可以使用JS。

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

  #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">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
               </div>
               <hr>
               <div id="secondlist">
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
               </div>
          </div>
      </div>
 </div>
 <div id="help-pane" class="visible">
   - help-pane -
 </div>
</div>

Answer 1

这是由default flex-box behaviour引起的，这会阻止弹性框变得比它的内容小。

此问题的解决方案是将min-width: 0（或列的最小高度：0）设置为所有父灵活方框。 在这种特定情况下（以及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!*/
} 

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
               </div>
               <hr>
               <div id="secondlist">
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
                 <div class="list-item">&nbsp;</div>
                 <div class="list-item odd">&nbsp;</div>
               </div>
          </div>
      </div>
 </div>
 <div id="help-pane" class="visible">
   - help-pane -
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;