超过父母身高时如何匹配同胞身高

debugcn 发表于 Dev

家谱

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

内部，两个div内联显示（彼此相邻）。两个div的高度都可变。当div高度之一超过父级高度（“溢出”设置为滚动）时，我需要两个同级都具有相同的高度。

高度：100％不起作用。

这是一个更清晰的示例：

炸玉米饼

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

使用网格将其设置为自动高度，则各列将具有相同的高度并调整为最大内容。另外，您也可以使用桌子，但我建议您不要采用这种古老的技巧来充分发挥责任感。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。