如何使子div与flex父高度相同

Question

我需要三个子 div 彼此高度相同，并且作为父 div。一个 div 的内容被设置为在用户交互时发生变化，并且由此产生的任何高度变化都应该驱动父级或其他子级或两者的高度。我认为这可以通过 flex 实现。

我已尝试实施针对相同问题的答案，但到目前为止还没有成功。谁能发现我做错了什么？我正在使用 Firefox，并且不需要它在其他浏览器中运行此原型版本，但当然，如果它确实会在以后节省时间。

我已经尝试过 'position: absolute' 和 'display: table' 最终接近但没有任何乐趣。无论如何，我真的很喜欢 flex 方法。

div#filterRow {
  min-height: 80px;
  display: flex;
  border: 2px solid red;
}

div#filterRow div.selectHolder {
  border: 2px solid blue;
  border-right: 0;
  flex: auto;
  height: 100%;
  padding: 10px;
}

div#filterRow div.selectHolder div {
  vertical-align: top;
}

div#filterRow div.selectHolder:last-child {
  border-right: 1px solid lightgray;
}

div#filterRow div h1 {
  margin: 0;
  margin-bottom: 10px;
}

div#filterRow div div {
  margin-right: 5px;
}

div#filterRow div#filters {
  width: 800px;
}

div#filterRow div#highlight {
  width: 300px;
}

div#filterRow div#granularity {
  width: 400px;
}

div.fullwidth {
  width: 100%;
}

<div class="fullwidth  dispTR" id="filterRow">

  <div class="selectHolder" id="filters">
    <h1>Filters longer to make tall</h1>
  </div>
  <div class="selectHolder" id="highlight">
    <h1>Highlight</h1>
  </div>
  <div class="selectHolder" id="granularity">
    <h1>Group</h1>
  </div>
</div>

此处示例：https://jsfiddle.net/rt80wd6r/2/

感谢您的帮助。我敢肯定这是显而易见的。

以下是其他问题：

HTML5 flexible box model height calculation

make div's height expand with its content

Answer 1

display: flex; 元素的子元素默认占用父元素的高度。所以不需要height: 100%; 或类似的。

div#filterRow {
  min-height: 80px;
  display: flex;
  border: 2px solid red;
}

div#filterRow div.selectHolder {
  border: 2px solid blue;
  border-right: 0;
  padding: 10px;
}

div#filterRow div.selectHolder div {
  vertical-align: top;
}

div#filterRow div.selectHolder:last-child {
  border-right: 1px solid lightgray;
}

div#filterRow div h1 {
  margin: 0;
  margin-bottom: 10px;
}

div#filterRow div div {
  margin-right: 5px;
}

div#filterRow div#filters {
  width: 800px;
}

div#filterRow div#highlight {
  width: 300px;
}

div#filterRow div#granularity {
  width: 400px;
}

div.fullwidth {
  width: 100%;
}

<div class="dispTR" id="filterRow">

  <div class="selectHolder" id="filters">
    <h2>Filters longer to make tall</h2>
    <p>
      Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel.
    </p>
  </div>
  <div class="selectHolder" id="highlight">
    <h2>Highlight</h2>
  </div>
  <div class="selectHolder" id="granularity">
    <h2>Group</h2>
  </div>
  
</div>

Answer 2

在 flex 容器上使用 align-items: stretch，并删除子项 (height: 100%) 中的显式高度。

https://jsfiddle.net/rt80wd6r/3/

仅供参考，flex 的工作方式是它提供了 2 个轴用于对齐项目，默认情况下是水平轴和垂直轴（但可以翻转为将垂直轴作为第一个轴，将水平轴作为第二个轴）。

第一个轴设置为justify-content，第二个轴设置为align-items - 所以在这种情况下，我们要在垂直轴上拉伸项目，所以我们使用align-items。

编辑：另一个答案提到 align-items: stretch 已默认设置，因此您应该接受它，因为它更优化。