我有这样的场景：
https://jsfiddle.net/b6zcdgf7/ https://jsfiddle.net/b6zcdgf7/
.container{
display:flex;
height:3em;
border:solid thin blue;
}
.section{
border:solid thin gray;
display:flex;
}
.section.horiz{
}
.section.vert{
flex-direction:column;
flex-wrap: wrap;
}
.box{
border:solid thin red;
width:1em;
height:1em;
}
<div class="container">
<div class="section horiz">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="section horiz">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="section horiz">
<div class="box"></div>
</div>
<div class="section vert">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
使用时.section.vert the .box元素溢出该部分。
我可以做些什么来防止必须设置宽度.section.vert元素？
改变flex-wrap to nowrap
.section.vert{
flex-direction:column;
flex-wrap: nowrap;
outline: 3px dashed green;
}
Fiddle https://jsfiddle.net/zer00ne/hhwwgcuz/
Snippet
.container{
display:flex;
height:3em;
border:solid thin blue;
}
.section{
border:solid thin gray;
display:flex;
}
.section.horiz{
}
.section.vert{
flex-direction:column;
flex-wrap: nowrap;
outline: 3px dashed green;
}
.box{
border:solid thin red;
width:1em;
height:1em;
}
<div class="container">
<div class="section horiz">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="section horiz">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="section horiz">
<div class="box"></div>
</div>
<div class="section vert">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
