Flexbox的：DIV忽略height属性

问题描述：

我建立与Flexbox的一个模式，具有两排设计：Flexbox的：DIV忽略height属性

|-------------------| 
|   A  | 
|-------------------| 
|     | 
|   B   | 
|     | 
|     | 
|-------------------|

由于A和B都具有高度的一个模式的一部分表达的百分比，而不是在px我使用flexbox为了给A一个高度，然后让B用可选的滚动条填充剩余的空间（如果需要的话）。

为了实现这一点，我使用以下HTML + CSS：

<div class="wrapper"> 
    <div class="A"></div> 
    <div class="B"></div> 
</div> 

.wrapper { 
    display: flex; 
    flex-direction: colum; 
    height: 100%; 
} 

.A { 
    height: 70px; 
    width: 100%; 
} 

.B { 
    margin: 10px 20px 10px 20px; 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

的问题是，根据B的含量，的变化的高度。有些内容固定为70px，其他内容可能为24px，如果我检查css规则，我可以看到高度为24px，当我点击规则时，它突出显示了“height：70px”代码行。

如果我在包装中删除了“display：flex”，那么高度对于任何类型的内容都是正确的，但div B会溢出模式并完全忽略“overflow-y：auto”规则。

我该如何解决这个问题？

它是'flex-direction：column'而不是'colum'。 – Boky

'身高：100％'应该从哪个父母的价值计算，如果有的话，？将拼写错误和高度修正为有效值（vh或父级上的有效高度以计算百分比），您的代码按预期工作https://codepen.io/anon/pen/vJvYKG –

答

如果您使用flex: 0 0 70px;结合min-height: 0;或overflow: hidden，它应确保A总是保持70px高。

第一0是柔性生长妨碍它成长，第二0是柔性收缩其防止其收缩，并且min-height/overflow将允许它也比其含量较小，默认情况下它不是（min-height默认为auto，这可防止弹性项目小于其内容）。

最后70px是柔性基础这是Flexbox的版本height，我建议您使用代替。

请注意，您在flex-direction值中缺少n,colum。

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 90vh; 
 
    background: lightgray; 
 
} 
 

 
.A { 
 
    flex: 0 0 70px; 
 
    width: 100%; 
 
    min-height: 0; 
 
    background: lightblue; 
 
} 
 

 
.B { 
 
    margin: 10px 20px 10px 20px; 
 
    flex-grow: 1; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    background: lightgreen; 
 
}

<div class="wrapper"> 
 
    <div class="A">A</div> 
 
    <div class="B">B</div> 
 
</div>

完美的解决方案！谢谢！ – ste

答

如果B的含量比B的高度 “高”，B生长在高度以某种方式容纳的内容。这会导致A的高度降低以进行调整。为了避免A缩小，请将flex-shrink: 0添加到其样式中。

Flexbox的：DIV忽略height属性

相关推荐