html - 将 div 的高度设置为另一个 div 高度

Question

我有一个这样的页面：

<div id="parent">
    <div id="childA">
        List of some contents
    </div>
    <div id="childB">
        The main content
    </div>
</div>


#childA{
    display: inline-block;
}
#childB{
    display: inline-block;
}

我想将父div的高度设置为childB的高度，而不是childA的高度。如果 childA 作为滚动条，以防它变得比 childB 大。 编辑：我刚刚意识到我可以从不同的角度解决问题。我希望它可以帮助你理解我想要什么。我需要根据它旁边的div（childB）的高度来设置一个div（childA）的高度。

#childB{
    overflow-y: scroll;
}

两个孩子的身高各不相同，但我希望我父母的身高等于 childB 的身高。我尝试使用表：

#parent{
    display: table;
}
#childB{
    display: table-row;
}

但是当childA大于childB时，childA会不断增加父母的身高

PS 我知道我可以使用 JavaScript，但我不想使用它。

标签： htmlcssheight

Answer 1

我希望下面的示例能让您了解在 childA 上设置一些 height 和 overflow-y 有何帮助。

#parent {
  display: flex;
  border: 1px solid black;
}

#childA {
  overflow-y: scroll;
  height: 60px;
}

#childB {

}

<div id="parent">
  <div id="childA">
    List of some contents
    List of some contents
    List of some contents
    List of some contents
    List of some contents
  </div>
  <div id="childB">
    The main content
    The main content
    The main contentThe main contentThe main content
    The main content
    The main content
    The main content
    The main content
  </div>
</div>