css - 如何在不使用 flex 的情况下从父 div 继承 div 高度

Question

我想在我的主页中插入一个网格。我将我的主页分成两个容器，一个用于标题，一个用于网格。我为标题指定了一个特定的高度，我希望网格应该适合剩余的容器。

我在这里看到的问题是，如果网格中有更多记录，网格会在主页内展开，并在页面上显示滚动条。

我希望网格仅显示在页面 View 内，而不增加页面高度。即，如果有更多记录，我希望网格显示滚动条而不是主页

我尝试删除 flex，添加“vh”高度和高度 100%，但似乎没有任何效果。我也尝试过 overflow hidden ，但它隐藏了网格的内容。我要内容但不要溢出

containerStyle: {
    width: "100%",
    display: "flex",
    paddingTop: viewPortWidth <= theme.sizes.Breakpoints.DimensionS ? undefined : "1.25rem",
    flexDirection: "column",
    flex: "1 0 auto",
    position: "relative",
},

预期结果

Answer 1

如果您的页眉具有固定高度，您可以使用 calc 来设置主要内容的高度例如高度:计算(100vh - 80px)；要使主要内容滚动，请添加 overflow-y: scroll;

示例:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: orange;
  height: 123px;
  flex-shrink: 0;  
}

main {
  flex-grow: 1;
  background: tomato;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

article {
  width: 29%;
  margin: 2%;
  height: 50vh;
  background: olive;
}

<div class="wrapper">
  <header>Header</header>
  <main>
    <article></article>
    <article></article>
    <article></article>
    <article>No room for me</article>
  </main>
</div>