Chrome会忽略列布局中的flex-basis

Question

我遇到了麻烦的Chrome要注意的柔性基础部分flex: 1 1 25%的flex-direction: column布局.它在row布局中工作正常.

下面的代码片段演示了这个问题:黄色,蓝色和粉红色条形基于柔性基础50px,25%和75%,在列和行弯曲方向上都显示.

如果您在Firefox(或IE11或Edge)中运行它,列和行都按预期划分区域:

但是如果你在Chrome(47)或Safari(9.0.3)中运行它,左边的列布局似乎完全忽略了flex-basis - 条形的高度似乎与flex-basis无关:

左右之间的唯一区别是flex-direction.

.container {
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;
}

.layout {
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}

.exact {
  flex: 1 1 50px;
  background: #ffc;
}
.small {
  flex: 1 1 25%;
  background: #cff;
}
.large {
  flex: 1 1 75%;
  background: #fcf;
}

<div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>

我尝试添加height: 100%到.column,这使得铬讲究柔性基础,但引起了另一个问题-柔性变得比它的容器更大:

.column {
  flex-direction: column;
  height: 100%;
}

我知道这是一个长期存在的webkit错误.有没有办法解决它？(我正在尝试创建一些通用布局组件,因此硬编码特定数量的子级或特定像素高度是不可行的.)

[编辑]这是一个显示一般问题的另一个例子(并避免上述示例中的边距和总数大于100%的问题):

.container {
  width: 300px;
  height: 300px;
  display: flex;
}

.layout {
  flex: 1 1 100%; /* within its flex parent */
  display: flex;
  background: #ffc;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
  height: 100%; /* attempted workaround for webkit */
}

.small {
  flex: 1 1 30%;
  background: #cff;
}
.large {
  flex: 1 1 70%;
  background: #fcf;
}

div {
  /* border/padding just makes divs easier to see --
     you can remove all of this without changing the problem */
  box-sizing: border-box;
  border: 1px solid #999;
  padding: 10px;
}

<div class="container">
    <div class="layout row">
        <div class="small">row: 30%</div>
        <div class="large layout column">
          <div class="small">row: 70%; col: 30%</div>
          <div class="large">row: 70%; col: 70%</div>
        </div>
    </div>
</div>

Answer 1

需要考虑的三个方面:

• 所有高度之和大于100%

  在您的.column布局中,您有三个弹性项目.他们的高度是75% + 25% + 50px.这本身就超出了height: 100%您的应用范围.这不会导致溢出,因为您已flex-shrink设置为1.

• 保证金空间

  您已margin: 10px为两种布局指定了.因此,从顶部和底部边缘可以额外增加20px的高度.在.column布局,这也确实导致在Chrome溢出.

  调整额外的20px,溢出消失了:

  .column {
    flex-direction: column;
    height: calc(100% - 20px);   /* new */
  }
  

  .container {
    width: 400px;
    height: 200px;
    display: flex;
    background: #666;
    position: relative;
  }
  
  .layout {
    flex: 1 1 100%; /* within .container */
    margin: 10px;
    display: flex;
  }
  
  .row {
    flex-direction: row;
  }
  .column {
    flex-direction: column;
    height: calc(100% - 20px);   /* NEW */
  }
  
  .exact {
    flex: 1 1 50px;
    background: #ffc;
  }
  .small {
    flex: 1 1 25%;
    background: #cff;
  }
  .large {
    flex: 1 1 75%;
    background: #fcf;
  }

  <div class="container">
    <div class="layout column">
      <div class="exact">50px</div>
      <div class="small">25%</div>
      <div class="large">75%</div>
    </div>
    <div class="layout row">
      <div class="exact">50px</div>
      <div class="small">25%</div>
      <div class="large">75%</div>
    </div>
  </div>

• 百分比高度:Chrome/Safari与Firefox/IE

  Chrome/Safari中的flex项目无法识别其百分比高度的原因是因为Webkit浏览器遵循对规范的更传统的解释:

  CSS height属性

  百分比
  指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度且此元素未绝对定位,则值计算为auto.

  auto
  高度取决于其他属性的值.

  换句话说,如果您希望元素具有百分比高度,则必须在父级上指定高度.

  这种语言的传统解释是"高度"意味着height财产的价值.虽然从语言中不清楚"高度"的含义是什么,但height财产要求一直是主要的实施方式.在处理百分比值时min-height,我从未见过max-height父母或其他形式的身高.

  然而,最近,正如这个问题(以及另一个和另一个和另一个)中所指出的,Firefox(和IE显然)已经扩展其解释以接受flex高度.

  目前尚不清楚哪种浏览器更符合标准.

  height自1998年以来该定义尚未更新(CSS2)无关紧要.

  底线,Chrome和Safari根据父级height属性的值来解析百分比高度.Firefox和IE11/Edge使用父级的计算弹性高度.

  就目前而言,在我看来,对于这个问题最简单的跨浏览器解决方案是使用全面的height属性来实现百分比高度.

  更新:此处有更多解决方案:Chrome/Safari不会填充100%高度的flex父级