如何让flexbox儿童100％的父母身高？

Question

如何让flexbox儿童100％的父母身高？

我正在尝试填充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>

这是JSFiddle

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

1. flex-2 高度为100％（这很奇怪，因为弹性项目默认为100％+ Chrome中存在错误）

2. flex-2-child 有一个绝对的位置也很不方便

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

Answer 1

我知道你已经说过position: absolute;不方便但是有效。有关修复调整大小问题的详细信息，请参阅下文。另请参阅这个jsFiddle进行演示，虽然我只在Chrome中添加了webkit前缀。你基本上有2个问题，我将分别处理。让灵活项目的孩子填充高度100％设置position: relative;在孩子的父母身上。坐落position: absolute;于孩子。然后，您可以根据需要设置宽度/高度（我的样本中为100％）。在Chrome中修复调整大小滚动“quirk”穿上overflow-y: auto;可滚动的div。可滚动div必须具有指定的显式高度。我的样本已经有100％的高度，但如果没有应用，你可以指定height: 0;

Answer 2

使用 align-items: 'stretch'类似于David Storey的回答，我的工作是.flex-2 {     display: flex;       align-items: 'stretch';}或者align-items，你可以align-self只使用.flex-2-child你想拉伸的项目。