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

【问题标题】：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;
}

【问题讨论】：

标签： javascript html css reactjs flexbox

【解决方案1】：

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

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

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

【讨论】：