flex-flow：列包装，在弹性框中导致父容器溢出 [英] flex-flow: column wrap, in a flex box causing overflow of parent container

问题描述

我有这种情况：

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 = > < 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>  

code> .section.vert .box 元素溢出部分。

有什么我可以做，以防止在 .section.vert 元素上设置宽度？

解决方案

将 flex-wrap 更改为 nowrap

  .section.vert {
 flex-direction：column; 
 flex-wrap：nowrap; 
 outline：3px broken green; 
 
} 
  

小提琴

小提示 >

  .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 broken green;}。box {border：solid thin red; width：1em; height：1em;}  

 < div class = > < 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>  

I have this scenario:

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>

When using .section.vert the .box elements overflow the section.

Is there anything i can do to prevent having to set a width on the .section.vert element?

解决方案

Change the flex-wrap to nowrap

.section.vert{
  flex-direction:column;
  flex-wrap: nowrap;
  outline: 3px dashed green;

}

Fiddle

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>

这篇关于flex-flow：列包装，在弹性框中导致父容器溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！