使用flex

Question

我有3个divs包含在2个父divs中。所有3个孩子divs内部都有div 指定的height。问题是，子divs包装器（类名为content的包装器）获得最大子div的高度。

HTML层次结构的emmet版本如下：div>div>(div>div)*3

如何让div的{​​{1}}级与其子级具有相同的高度？

JSFiddle

＆＃13;

＆＃13;

content

＆＃13;

var first = document.getElementById('first');

console.log(first.offsetHeight + ' ' + first.firstElementChild.offsetHeight); // 250 200
// How can I get them both to be 200 automatically?

＆＃13;

.content {
  overflow: hidden;
}
.wrapperLongInner {
  display: flex;
}
.wrapperShortOuter {
  overflow: hidden;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

目前还不完全清楚你要做什么，但flex-container中的默认垂直大小（align-items）是stretch。

如果将其更改为flex-start，则高度均为200。

var first = document.getElementById('first');

alert(first.offsetHeight + ' ' + first.firstElementChild.offsetHeight); // 250 200
// How can I get them both to be 200 automatically?

.wrapperShortOuter {
  width: 300px;
  background: #000;
}
.wrapperLongInner {
  display: flex;
  width: 600px;
  align-items: flex-start;
  ;
}
#first {
  width: 300px;
}
#first div {
  background-color: turquoise;
  width: 300px;
  height: 200px;
}
#second {
  width: 0;
}
#second div {
  background-color: burlywood;
  width: 300px;
  height: 150px;
}
#third {
  width: 0;
}
#third div {
  background-color: yellowgreen;
  width: 300px;
  height: 250px;
}
#last {
  background-color: red;
  width: 50px;
  height: 100px;
}

<div class="wrapperShortOuter">
  <div class="wrapperLongInner">
    <div class="content" id="first">
      <div></div>
    </div>
    <div class="content" id="second" style="width: 0px;">
      <div></div>
    </div>
    <div class="content" id="third" style="width: 0px;">
      <div></div>
    </div>
  </div>
</div>
<div id="last"></div>

Answer 2

.content {
  overflow: hidden;
}

.wrapperLongInner {
  display: block;
}

.wrapperShortOuter {
  overflow: hidden;
}

尝试将display属性的值设为block。如果布局与您预期的布局不匹配，则必须提供一些反馈。