<分区>
我使用 Flexbox 为应用程序创建了响应式布局。 该布局要求左侧有一个可折叠菜单，中间有一个带有标题和正文的 block ，右侧有一个可切换的帮助 Pane (还有更多内容，但这是基本结构)。
左侧菜单有两种状态:180px 宽或 80px 宽。帮助 Pane 要么隐藏，要么占用 180 像素。中间的盒子占据了其余的空间。 Flexbox 就像一个魅力。
当我使用 white-space: nowrap 制作滚动 div 时，问题就来了。我有一堆元素需要在水平滚动条中显示，所以我有一个包含元素的列表 div，设置为 overflow:auto 和 white-space: nowrap。
通常这很有效，但现在它破坏了我的 flex 布局。滚动器不是采用父 (flex) div 的宽度，而是使 div 更宽，这反过来又将帮助 Pane 推出边界。
下面的 fiddle 说明了这个问题:
http://jsfiddle.net/PieBie/6y291fud/
您可以通过单击菜单栏中的切换帮助 来切换帮助 Pane 。 通过单击菜单中的 list whitespace toggle 重现问题，这会切换列表的 white-space: no-wrap CSS 属性。如果帮助 Pane 打开，您可以看到它被推出边界。
底部列表是我想要实现的，但我希望它是其父级的全宽。
我可以在 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"> </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>