我正在尝试填充 Flexbox 内的弹性项目的垂直空间。

.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>

这是JSFiddle

flex-2-child不填充所需的高度，除非在以下两种情况下：

1. flex-2高度为 100%（这很奇怪，因为弹性项目默认为 100% + 它在 Chrome 中是错误的）
2. flex-2-child有一个绝对位置，这也很不方便

目前这在 Chrome 或 Firefox 中不起作用。