如何使 div 高度与兄弟 div 的高度相同？

Question

我正在寻找一种方法使 #items div 与 #details div 的高度相同，但我似乎无法使用 CSS 做到这一点，因此寻求帮助。

也有一些细微差别：

• #details 高度可能因内容而异，但会有一个最小高度（例如 400 像素）
• #items 可以有 1 到 N 个项目，因此如果不需要滚动条应该隐藏（溢出-y：自动）

Answer 1

尝试像那样弯曲：

.container {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#details {
   min-height: 400px;
}

注意：container 是 #items 和 #details

的父级

Answer 2

这可以使用 flex 轻松实现，

.row {
    display: flex
}

#items {
    background: red;
    width: 20%;
}

#details {
    background: blue;
    width: 80%;
}

<div class="row">
  <div id="items">words</div>
  <div id="details">words wordswords words wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswordswords wordswords words wordswords words wordswords</div>
</div>