我目前正在嘗試為我的應(yīng)用程序做一個(gè)布局。 我努力實(shí)現(xiàn)的目標(biāo)是。main__content填充所有可用高度，然后在需要更多空間時(shí)滾動(dòng)。

我嘗試將段落包裝到另一個(gè)div中，但是沒(méi)有用。 有什么方法可以讓我達(dá)到期望的行為？

演示

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

嘗試將高度設(shè)置為。內(nèi)容& amp。main to & quot繼承& quot和設(shè)置& amp_ _內(nèi)容的高度為100%。