html - 超过父身高时如何匹配兄弟身高

Question

我有一个固定高度的父 div。

在内部，两个 div 内联显示（彼此相邻） 两个 div 具有可变高度。当其中一个 div 高度超过父高度（溢出设置为滚动）时，我需要两个兄弟姐妹具有相同的高度。

高度：100% 不起作用。

这是一个更清晰的例子：

预期结果

标签： htmlcss

Answer 1

#parent {  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
  border: 1px solid red;
}

#childOne {
  padding: 5px;
  margin: 5px 0 5px 5px;
  border: 1px solid yellow;
}

#childTwo {
  padding: 5px;
  margin: 5px 5px 5px 0;
  border: 1px solid green;
}

<div id="parent">
  <div id="childOne">
    <p>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.</p>
  </div>
  <div id="childTwo">
    <p>Different Content</p>
  </div>
</div>

使用具有自动高度的网格来执行此操作，然后列将具有相同的高度并调整为最大的内容。或者你可以使用一张桌子，但我建议不要使用这种古老的技术来充分响应。