如何设置CSS让list-container撑满父容器高度并与首个heading-tab顶部对齐

问题描述 #

我开发了一个包含可展开分类标签、右侧展示对应列表的React组件，目前遇到一个布局问题难以解决：
如何设置CSS属性让list-container撑满父元素container的完整高度，使得列表顶部始终和第一个heading-tab保持水平对齐？

问题现象截图 #

复现代码 #

我当前使用React+Styled Components开发，下方代码片段用于复现该DOM行为（逻辑为遍历数组，为每一项返回对应组件）：

CSS代码

.container {
  display: flex;
}

.heading-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;

  max-height: 72px;
  width: 360px;
  border-top: 1px solid lightgrey;
}

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

.list-container{
  display: flex;
  width: 100%;
  height: auto;
  overflow-y: auto;
}

.panel-container{
  position: absolute;
}

HTML代码

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

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

<div class="container">
  <div class="heading-tab">
    <p class="heading-text">Heading Three</p>
  </div>
  <div class="list-container">
    <div class="panel-container">
        <ul>
          <li>List items</li>
          <li>List items</li> 
          <li>List items</li>    
        </ul>
    </div>
  <div>
</div>

解决方案 #

核心问题原因 #

你当前的DOM结构把每个标签和对应的列表放在同一个container容器里，所以列表只会跟第三个标签对齐，天然无法和第一个标签保持水平。

修改方案 #

1. 调整DOM结构，新增两个顶层容器分别包裹左侧所有标签、右侧列表区域，不要把列表和第三个标签放在同一个容器内
2. 对应修改CSS属性即可实现需求，修改后代码如下：

/* 新增顶层容器样式 */
.layout-wrap {
  display: flex;
  width: 100%;
}
.left-tab-area {
  width: 360px;
}
.right-list-area {
  flex: 1;
  min-height: 100%;
  overflow-y: auto;
}
/* 原有样式调整 */
.container {
  display: flex;
}
.heading-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  width: 360px;
  border-top: 1px solid lightgrey;
}
.heading-text {
  padding: 22px 0 22px 32px;
  margin: 0;
  font-size: 16px;
}
/* 删除原有panel-container的absolute定位 */
.panel-container{
  position: relative;
}

3. 如果不能修改DOM结构，可以给list-container添加margin-top: -144px（两个标签的总高度），同时设置min-height: calc(100% + 144px)即可临时实现效果，但不推荐这种写法，调整DOM结构是最优解。

内容的提问来源于stack exchange，提问作者cts