本文翻译自:How to make flexbox children 100% height of their parent?
I'm trying to fill the vertical space of a flex item inside a flexbox. 我正在尝试在flexbox内填充flex项目的垂直空间。
.container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; }
<div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div>
And here's the JSFiddle 这是JSFiddle
flex-2-child
doesn't fill the required height except in the two cases where: 除了以下两种情况外, flex-2-child
不会填充所需的高度:
-
flex-2
has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)flex-2
的高度为100%(这很奇怪,因为flex项默认情况下为100%+在Chrome中有问题) -
flex-2-child
has a position absolute which is also inconvenientflex-2-child
具有绝对位置,这也不方便
This doesn't work in Chrome or Firefox currently. 目前,该功能不适用于Chrome或Firefox。
#1楼
参考: