<分区>
我无法让 Chrome 在 flex-direction: column 布局中关注 flex: 1 1 25% 的 flex-basis 部分。它在 row 布局中运行良好。
下面的代码片段演示了这个问题:黄色、蓝色和粉红色条是 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>