html - 如何使父 div 与其第一个孩子的高度相同？

Question

这是一张图片：

！

我的div2和div3包含动态内容，这样它们的高度每次都会不同。div2总是比div3虽然短得多。

我正在寻找一种方法来强制高度为div3' div2s，然后div1整齐地包含它们，所以结果应该如下所示：

但我不知道该怎么做。有什么建议吗？

做了一个小提琴：https ://jsfiddle.net/q93uvgcs/

标签： htmlcssposition

Answer 1

.div1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: fit-content(0);
  border: 1px solid;
}

.div2 {
  border: 1px solid #000;
}

.div3 {
  width: 300px;
  overflow-y: auto;
  border: 1px solid #000;
  margin-left: 50px;
}

<div class="div1">
  <div class="div2">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
  <div class="div3">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
</div>

您可以使用display:grid布局来实现您想要做的事情。在父级将列设置为每个 1fr，将它们水平地放入容器中，并为行设置 fit-content(0)，将第一个高度设置为其内容，从而强制另一个遵守规则。