Question

给出以下标记：

<div class="wrapper">
  <div id="one">
    Some content
  </div>
  <div id="two">
    Some content
  </div>
</div>

最简单的方法是使两个div都具有相同的高度，即#two的计算高度（具体来说，高度自动但是坚持min-height）？因此，如果#two超过#one，则#one应展开以匹配;如果#two更短，#one应该被切断（并根据其overflow设置溢出）。

我认为flexbox可能是我的救世主（因为它经常如此），但我无法弄清楚如何。

Answer 1

如果第一个容器有一个绝对子容器，它会占用文档流，它将始终由第二个flex子容器的高度控制。如果您将#two的内容更改为更多，您会看到它正确增长。看这里：

演示：http://codepen.io/anon/pen/NbWmdB

HTML：

<div class="wrapper">
  <div id="one">
    <div class="one-inner">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div id="two">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. amet.
  </div>
</div>

的CSS：

.wrapper {
  display:flex
}

#one {
  background:red;
  position:relative;
  flex:1;
  overflow:auto
}

.one-inner {
  position:absolute;


}

#two {
  background:green;
  flex:1;
}

希望有所帮助

Answer 2

使用flexbox很容易：

使用列布局以使高度为主要大小
在第一个元素后强制换行，以便柔性项并排显示
设置flex-basis: 0px以使其最初没有高度，然后让它增长以使用flex-grow: 1填充可用空间。
使用与可见不同的overflow个。或者，如果您希望内容溢出，请使用min-height: 0。

＆＃13;

.wrapper {
  display: flex;
  flex-flow: column wrap;
  margin: 10px;
}
.one {
  flex: 1 1 0px;
  page-break-after: always;
  break-after: always;
  overflow: auto;
}
.one, .two {
  border: 1px solid;
  width: 50%;
}

＆＃13;

<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

＆＃13;

但是，强制换行并未得到广泛支持。所以你也可以试试旧桌子：

将内包装添加到第一个单元格
让它绝对定位。由于绝对定位的元素被取出，因此它们的内容对容器的高度没有影响。
让它使用top，right，bottom，left完全填充相对定位的单元格。

＆＃13;

.wrapper {
  display: table;
  width: 80%;
  table-layout: fixed;
  margin: 10px;
}
.one, .two {
  display: table-cell;
  position: relative;
  border: 1px solid;
}
.one-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

＆＃13;

<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

＆＃13;

Answer 3

假设我理解正确。

我个人喜欢根据需要使用溢出的填充底部。在为响应式在线设计师添加div图层时需要使用此方法，并且需要按百分比约束所有大小。

＆＃13;

.wrapper {display: flex; padding-bottom: 56.25%; overflow: hidden}
#one {background:green}
#two {background:yellow;}

＆＃13;

<div class="wrapper">
  <div id="one">
    Some content<br>
    Some content<br>
    Some content<br>
    Some content<br>
</div>
  <div id="two">
    Some content
  </div>
</div>

＆＃13;

两个div并排，相等的高度由一个控制

3 个答案: