Javascript 如何在没有给定高度的情况下使内容在flex box内可滚动？

我正在尝试创建一个flex行拆分面板，其中列flexbox中有一个页脚。但是，我发现，除非我通过编码

height:calc（100%-FooterHeight）

来限制容器的高度，否则我无法使内容可滚动。有人知道实现这一目标的替代方法吗

提前谢谢

我的代码：

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>
  );
}

---

您需要将

高度
替换为
溢出：隐藏

.row{
弹性：1；
显示器：flex；
溢出：隐藏；
}

这是您的代码沙盒的分支：
它可以工作！非常感谢！：）很高兴这有帮助。干杯
.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;
}