空白：nowrap打断flexbox布局[重复]
我使用Flexbox为一个应用程序创建了一个响应性布局。布局需要左侧的可折叠菜单，中间有标题和正文的块，右边有可切换的帮助窗格（更多的是它，但这是基本结构）。
左侧菜单有两种状态：180像素宽或80像素宽。“帮助”窗格要么隐藏，要么以180像素的速度显示。中间的盒子占据了剩余的空间。Flexbox就像一个魔咒。
当我使用空白：nowrap创建滚动div时，问题就开始了。我有一堆需要在水平滚动条中显示的项目，因此我有一个包含这些项目的列表div，设置为overflow:auto和whitespace:nowrap。
通常这很有魅力，但现在它打破了我的flex布局。滚动条不采用父（flex）div的宽度，而是使div变宽，从而将帮助窗格推到边界之外。
下面的提琴说明了这个问题：
http://jsfiddle.net/PieBie/6y291fud/
通过单击菜单栏中的“切换帮助”，可以切换“帮助”窗格。通过单击菜单中的列表空白切换来重新创建问题，这将切换列表的空白：无换行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>共有1个答案
这是由默认的flex-box行为引起的，该行为防止flex-box变得比其内容更小。
此问题的解决方案是为所有父flex-box设置最小宽度： 0（或最小高度： 0用于列）。在这种情况下（和小提琴中）：
#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>-
import { Flexbox,FlexboxItem } from 'feui'; components: { [Flexbox.name]: Flexbox, [FlexboxItem.name]: FlexboxItem } .flex-demo{ text-align: center; color: #fff; background-color: #
-
使用指南 组件介绍 本组件大量用到 flex 知识，同时实现栅格系统(12 列)。 引入方式 import { Flexbox,FlexboxItem } from 'feart'; components: { 'fe-flexbox': Flexbox, 'fe-flexbox-item': FlexboxItem } 代码演示 横向排列 <fe-flexbox> <f
-
在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。 flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用 flexDirection、alignItems 和 justifyContent 三个样式属性就已经能满足大多数布局需求。 React Native 中的 flexbox 的工作原理和 web 上的 css 基本一致，当然也有差异。首
-
我有4个div我正在使用flexbox对齐。在桌面大小下，有3个等宽列，第一个和最后一个div占了容器的整个高度。第二个和第三个divs在中间垂直堆叠，各占高度的50%。效果不错。 在移动大小，我希望最后一个div在顶部，并伸展整个宽度的容器。然后，我希望第一个div在顶部div下方左对齐，并占据容器宽度和剩余高度的50%。 我遇到的问题是，我希望第二个和第三个div在顶部div的正下方对齐，并且
-
如何判断flexbox布局行占用浏览器窗口中剩余的垂直空间？ 我有一个3排的flexbox布局。前两行是固定高度，但第三行是动态的，我希望它能增长到浏览器的全高度。 我在第3行中有另一个flexbox，它创建了一组列。为了正确调整这些列中的元素，我需要它们了解浏览器的全部高度——比如背景颜色和底部的项对齐。主要布局最终将类似于此： 我尝试添加了一个属性，当我将其设置为硬数字时，该属性确实有效，但当
-
本文向大家介绍浅谈React Native Flexbox布局(小结)，包括了浅谈React Native Flexbox布局(小结)的使用技巧和注意事项，需要的朋友参考一下 Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动