我的布局看起来像这样:
<div style="display: flex; flex-direction: row;height:100%;">
<div style="width:250px"></div>
<div style="flex:1;height:100%"></div>
</div>
第二个内部div垂直增长,所以我需要div来滚动(但不是左内部div)。这在Firefox上运行得很好,但在Chrome上,第二个内部div包含内容的高度并且不断增长。据我所知,这是因为在Chrome中,100%仅在父级具有已定义的高度时才有效。
如何让第二个内部div flex填充宽度并匹配父级的高度?
答案 0 :(得分:0)
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.container > div:first-child {
flex: 0 0 250px;
align-self: flex-start;
background-color: aqua;
}
.container > div:last-child {
flex: 1;
overflow: auto;
background-color: pink;
}
body {
margin: 0;
}
&#13;
<div class="container">
<div>Item One</div>
<div>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>
</div>
</div>
&#13;