如何在不给定高度的情况下使内容在弹性框中可滚动？

Posted 2023-02-22

【中文标题】如何在不给定高度的情况下使内容在弹性框中可滚动？

【英文标题】：How to make content scrollable inside a flex box without given the height?

【发布时间】：2021-04-05 22:43:02

【问题描述】：

我正在尝试在列 flexbox 内创建一个带有页脚的 flex 行拆分面板。但是，我发现除非我通过编码height: calc(100% - FooterHeight) 来限制容器的高度，否则我无法使内容可滚动。有谁知道实现这一目标的替代方法？

提前致谢！

Sandbox URL

我的代码：

import React from "react";
import "./styles.css";

const lefts = new Array(15).fill("Left");
const rights = new Array(15).fill("Right");

export default function App() 
  return (
    <div className="height">
      <div className="column">
        <div className="row">
          <div className="row-left">
            lefts.map((left, index) => 
              return (
                <div key=index className="item">
                  left + index
                </div>
              );
            )
          </div>
          <div className="row-right">
            rights.map((right, index) => 
              return (
                <div key=index className="item">
                  right + index
                </div>
              );
            )
          </div>
        </div>
        <div className="footer">Footer</div>
      </div>
    </div>
  );

我的 CSS：

.height 
  height: 600px;
  width: 600px;
  background-color: gray;
  display: flex;
  flex-direction: column;


.column 
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;


.row 
  flex: 1;
  display: flex;
  height: calc(100% - 60px); // not preferred


.row-left 
  width: 200px;
  border: 1px solid red;
  overflow: auto;


.row-right 
  flex: 1;
  border: 1px solid peru;
  overflow: auto;


.item 
  padding: 16px;


.footer 
  flex-shrink: 0;
  height: 60px;
  border: 1px solid blue;

【参考方案1】：

您需要将 height 替换为 overflow: hidden 以获得 .row：

.row 
  flex: 1;
  display: flex;
  overflow: hidden;

这是您的 Codesandbox 的分支： https://codesandbox.io/s/fast-wood-1wxii