Question

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

我试图对相同的问题给出答案，但到目前为止还没有运气。谁能发现我做错了什么？我使用的是Firefox并且不需要在其他浏览器中使用这个原型版本，但当然如果它可以节省时间。

我尝试过'绝对＆＃39;和＆＃39;显示：表＆＃39;接近，没有快乐。无论如何，真的很喜欢弹性方法。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

此处示例：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%;或类似的。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

在Flex容器上使用align-items: stretch，并删除子项目中的显式高度（height: 100%）。

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

FYI flex的工作方式是它提供2个轴来对齐你的项目，默认是水平和垂直（但可以翻转为垂直是第一个，水平是第二个）。

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

编辑：其他答案提到默认情况下已设置align-items: stretch，因此您应该接受该更优先。

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

2 个答案: