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

Question

我很难让Chrome注意到flex-direction:column布局中flex:1 1 25%的flex-basis部分。它在行布局中运行良好。

下面的代码片段演示了这个问题：黄色、蓝色和粉红色的条是基于flex的50px、25%和75%，显示在列和行flex方向上。

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

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

css lang-css prettyprint-override">.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的基础，但却引起了一个不同的问题--flex变得比它的容器大：

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

我想这是一个长期存在的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布局中，有三个flex项。它们的高度为75%+25%+50px。这本身就超过了您应用的height:100%。这不会导致溢出，因为您将flex-shrink设置为1。

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