基于Bulma或纯Flex实现等高双列 右列拆分双块溢出可滚动

Bulma 原生实现方案 #

Bulma 自带的栅格系统默认就是等高布局，搭配内置的 Flex 工具类可以实现需求，仅需要少量自定义 CSS 调整样式。

完整代码 #

<!-- 引入Bulma核心CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<div class="columns p-5">
  <!-- 左侧列：高度随内容自动增长，和右侧列保持等高 -->
  <div class="column is-half purple">
    <p>左侧内容1</p>
    <p>左侧内容2</p>
    <p>左侧内容3</p>
    <p>新增内容会自动撑高整个列的高度</p>
  </div>
  <!-- 右侧列：设为纵向Flex容器 -->
  <div class="column is-half is-flex is-flex-direction-column p-0">
    <!-- 第一个堆叠块：仅占用自身内容所需高度 -->
    <div class="p-3 has-background-light">
      first stack，高度随内容自动适配
    </div>
    <!-- 第二个堆叠块：占满剩余可用高度，内容溢出自动滚动 -->
    <div class="p-3 is-flex-grow-1 is-overflow-auto has-background-white-ter">
      second stack<br>
      大量内容测试<br>大量内容测试<br>大量内容测试<br>大量内容测试<br>
      大量内容测试<br>大量内容测试<br>大量内容测试<br>大量内容测试<br>
      大量内容测试<br>大量内容测试<br>大量内容测试<br>大量内容测试<br>
    </div>
  </div>
</div>

.purple {
  background: purple;
  color: #fff;
  border-radius: 5px;
}
.column {
  margin: 0 10px;
  border-radius: 5px;
  overflow: hidden;
}

核心逻辑 #

• Bulma columns 容器默认开启等高布局，左侧内容高度变化时，右侧列会同步适配高度
• 右侧列添加 is-flex is-flex-direction-column 设为纵向Flex容器
• 第二个堆叠块添加 is-flex-grow-1 自动占满剩余高度，搭配 is-overflow-auto 实现内容溢出滚动
• 第一个堆叠块无需额外设置，默认仅占用自身内容高度

纯Flexbox实现方案 #

如果不使用框架，原生Flex也可以直接实现需求，代码如下：

完整代码 #

<div class="columns">
  <div class="column purple">
    <p>左侧内容1</p>
    <p>左侧内容2</p>
    <p>左侧内容3</p>
  </div>
  <div class="column right-col">
    <div class="stack-1">first stack</div>
    <div class="stack-2">
      second stack<br>
      大量内容测试<br>大量内容测试<br>大量内容测试<br>大量内容测试<br>
      大量内容测试<br>大量内容测试<br>大量内容测试<br>大量内容测试<br>
    </div>
  </div>
</div>

.columns {
  display: flex;
  gap: 20px;
  margin: 0 auto;
  width: 90%;
}
.column {
  flex: 1;
  border-radius: 5px;
  overflow: hidden;
}
.purple {
  background: purple;
  color: #fff;
  padding: 15px;
}
.right-col {
  display: flex;
  flex-direction: column;
}
.stack-1 {
  padding: 15px;
  background: #f5f5f5;
}
.stack-2 {
  flex: 1;
  overflow: auto;
  padding: 15px;
  background: #eee;
}

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