【发布时间】：2016-11-08 11:56:31
【问题描述】：
我使用 Flexbox 为应用创建了响应式布局。 该布局要求左侧有一个可折叠菜单，中间有一个带有标题和正文的块，右侧有一个可切换的帮助窗格（还有更多，但这是基本结构）。
左侧菜单有两种状态：180 像素宽或 80 像素宽。帮助窗格要么被隐藏，要么占用 180 像素。中间的盒子占据了其余的空间。 Flexbox 就像一个魅力。
当我使用white-space: nowrap 制作滚动 div 时，麻烦就开始了。我有一堆需要在水平滚动条中显示的项目，所以我有一个包含项目的列表 div，设置为 overflow:auto 和 white-space: nowrap。
通常这就像一个魅力，但现在它打破了我的弹性布局。滚动条不是采用父 (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"> </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>【问题讨论】：
标签： html css webkit flexbox whitespace