如何使flexbox子代的父母高度为100％？

本文翻译自：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不会填充所需的高度：

1. 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中有问题）
2. flex-2-child has a position absolute which is also inconvenient flex-2-child具有绝对位置，这也不方便

This doesn't work in Chrome or Firefox currently. 目前，该功能不适用于Chrome或Firefox。

---

#1楼

参考：