我目前正在尝试为我的应用程序做一个布局。 我努力实现的目标是。main__content填充所有可用高度，然后在需要更多空间时滚动。

我尝试将段落包装到另一个div中，但是没有用。 有什么方法可以让我达到期望的行为？

演示

App.tsx

function App() {

  const items = new Array(50).fill(null);

  return (
    <div className={style.workspace}>
      <div className={style.header}>header</div>

      <div className={style.content}>
        <div className={style.menu}>menu</div>
        <div className={style.sidebar}>sidebar</div>

        <div className={style.main}>
          <div className={style.tabs}>tabs</div>
          <div className={style.main__content}>
            {items.map((_, index) => (
              <p key={index}>line</p>
            ))}
          </div>
        </div>
      </div>

      <div className={style.footer}>footer</div>
    </div>
  );
}

styles.scss

.workspace {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-rows: 48px calc(100% - 72px) 24px;

  .header {
    background: coral;
  }

  .content {
    display: grid;
    grid-template-columns: 48px 300px calc(100vw - 348px);
    
    background: red;

    .menu {
      background: darkslateblue;
    }

    .sidebar {
      background: darkslategray;
    }

    .main {
      height: 100%;

      display: flex;
      flex-direction: column;

      .tabs {
        height: 48px;
        background: cyan;
      }

      &__content {
        flex-grow: 1;
        background: rebeccapurple;

        display: flex;
        flex-direction: column;

        overflow-y: auto;
      }
    }
  }

  .footer {
    background: yellowgreen;
  }
}

尝试将高度设置为。内容& amp。main to & quot继承& quot和设置& amp_ _内容的高度为100%。