Microsoft Edge浏览器会破坏嵌套的flex子项

Question

我正在使用flexbox创建一个简单而优雅的基于Flexbox的响应式布局.这是HTML示例:

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
  <!-- I can add more sections here,
      to serve as "cards", for example -->
</div>

以下是款式:

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

flex-basis: 0; flex-grow: 1; max-width: 100%;我的样式表的目的是默认在所有flex子项上,这样每个flex子项只会增长内容所需的数量,但仍然填充宽度,如果需要包装.它工作得很好.

可选项flex-basis: auto; flex-grow: 0;是使flex子项像以前一样根据需要增长,但不会比这更大,主要是围绕内容收缩包装flex项目.

<section>除非需要,我将用它来区分不会增长的"卡片".

section {
  background-color: white;
  border: 1px solid black;
}

这在Firefox和Chrome上看起来很漂亮.但它完全打破了Microsoft Edge 42.17134.1.0(EdgeHTML 17.17134).在边缘,<section>我正在使用的卡片完全缩小,就好像我将它从正常流动中漂浮出来一样.内容仍然显示,完全超出了界限<section>.你可以在这里试试:

https://jsfiddle.net/garretwilson/wgo8rqxf/4/

我可以通过更改内部的flex属性<div>(通过使用concise上面的样式类)来解决Edge上的这个问题:

<div class="box">
  <section class="box concise">
    <div class="box concise">
      this is just for test
    </div>
  </section>
</div>

但手动添加此concise样式并不是一个可行的解决方案.我不能手动更改子弹性属性只是为了防止它在Edge上破坏.此外,它会改变孩子的行为方式.例如,如果我设置了宽度<section>,我希望它的子节点填充空间.

这是一个已知的边缘bug与flex儿童？内心不应该<div>根据内容的需要增长吗？

同样重要的是,有没有人知道我可以放在样式表中的一般解决方法,以防止Edge在层次结构中折叠flex项目,而不在HTML中添加任意标记或样式？

Answer 1

这个问题的解决方案实际上非常简单.然而,解释并非如此.

解

不要使用无单位值flex-basis.它打破了Microsoft浏览器(IE和Edge)中的flex布局.

而不是这个,你在代码中有:

.box > * {
  flex-basis: 0;
}

用这个:

.box > * {
  flex-basis: 0%;
}

这解决了这个问题.

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0%;  /* adjustment */
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

section {
  background-color: white;
  border: 1px solid black;
}

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
</div>

说明

根据flexbox规范,使用无flex-basis属性值与属性应该没有问题.

但是,实际上,IE和Edge在渲染这些值时存在问题.

这些帖子探讨了这个问题:

• flexbox中的图像行为(嵌入列中的行)
• flex属性在IE中不起作用
• 为什么速记flex属性的行为与IE中的长手属性不同？
• 了解无单位柔性基础

因此,作为在IE和Edge中有效的安全跨浏览器替代方案,请勿使用无单位值flex-basis.这既适用于flex-basis长期财产,也适用于flex财产的一部分.