css - 如何使子 div 与 flex parent 高度相同

Question

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

我已经尝试实现对相同问题的回答，但到目前为止运气不佳。谁能发现我做错了什么？我正在使用 Firefox，并且不需要它在其他浏览器中为这个原型(prototype)版本工作，但当然如果它在以后会节省时间。

我已经尝试了“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>