Chrome 忽略列布局中的 flex-basis [重复]

Question

我无法让 Chrome 关注 flex-direction: column 布局中 flex: 1 1 25% 的 flex-basis 部分。它在 row 布局中运行良好。

下面的 sn-p 演示了这个问题：黄色、蓝色和粉色条是 flex-basis 50px、25% 和 75%，显示在列和行的 flex 方向上。

如果您在 Firefox（或 IE11 或 Edge）中运行它，则列和行都按预期划分区域：

但是如果您在 Chrome (47) 或 Safari (9.0.3) 中运行它，左侧的列布局似乎完全忽略了 flex-basis —— 条形的高度似乎与 flex 无关-基础：

左右之间的唯一区别是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，这使得 Chrome 会关注 flex-basis，但会导致另一个问题——flex 变得比它的容器大：

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

我猜这是long-standing webkit bug。有没有办法解决它？ （我正在尝试创建一些通用布局组件，因此硬编码特定数量的子元素或特定像素高度是不可行的。）

[编辑] 这是一个显示一般问题的附加示例（并避免上例中的边距和总大于 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 vs Firefox / IE

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

  CSS height property

  百分比
  指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度并且该元素不是绝对定位的，则该值计算为auto。

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

  换句话说，如果你想让一个元素有一个百分比高度，那么你必须在父元素上指定一个高度。

  这种语言的传统解释是“高度”表示height 属性的值。尽管从语言中不清楚“高度”的确切含义，但 height 属性要求一直是主要的实现。在处理百分比值时，我从未见过min-height、max-height 或其他形式的身高对父母有效。

  然而，最近，正如这个问题（以及 another one 和 another one 和 another one）中所指出的，Firefox（和 IE，显然）已经扩大了其解释范围以接受 flex 高度。

  尚不清楚哪种浏览器更符合标准。

  height 定义自 1998 年以来一直没有更新 (CSS2)，这无济于事。

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

  目前，在我看来，针对此问题的最简单的跨浏览器解决方案是全面使用 height 属性来获取百分比高度。

  更新：这里有更多解决方案：Chrome / Safari not filling 100% height of flex parent