如何防止div根据子元素的大小垂直增长

Question

我已经将我的问题处理成一个代码-p - 我实际上正在使用 React，所以它实际上表现得像一个 TabHeadings 列表 - 当单击一个时，它会将 List 扩展到它的右侧（因此一次只能看到一个）。

我的heading-tab 上有一个高度，我不希望它超过它，但是因为list 的高度更大 - 它使它扩展到相同的高度，我该如何防止这种情况发生？

.container {
  display: grid;
  grid-template-columns: 294px auto;
}

.heading-tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 72px;
  width: 294px;
  border-top: 1px solid lightgrey;
}

.heading-text {
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 32px;
  margin-bottom: 0px;
  font-size: 16px;
}

.list-container {
  margin-left: 96px;
}

<div class="container">
  <div class="heading-tab">
    <p class="heading-text">Heading One</p>
  </div>

  <div class="list-container">
    <div class="list">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <ul>
    </div>
  </div>
</div>

Answer 1

这是您想要达到的结果吗？
https://jsfiddle.net/Ljopa0hy/17/

基本上，在容器上设置高度并使用 flexbox 代替网格。

.container {
  display: flex;
  height: 72px;
}

.heading-tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 294px;
  background-color: #eee;
}

.list-container {
  background-color: #aaa;
  width: 100%;
  overflow-y: scroll;
}

更新：
看看这个解决方案https://stackoverflow.com/a/38852981/1107544