如何计算grid-template-row的最大高度：auto？

Question

我正在尝试在子元素中实现滚动条，而不是整个页面的滚动条。为此，我应为max-height代码设置main。

为了能够很好地坐在网格中，我相信我必须计算max-height的{​​{1}}。

我想我可以使用像grid-template-row: auto

这样的东西

但是，我不知道如何识别 FOO 或 BAR 。

我很感激您提供的任何帮助！

max-height: minmax (FOO, BAR)

/* removes codepen's scrollbar */
* {overflow: hidden}

#wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: min-content auto min-content;
  min-height: 100vh;
}

main {
  overflow-y: scroll;
  /* This is the problem */
  max-height: calc(100vh - 200px);
  /* 
  I believe that max-height is calculated as max-height: minmax (FOO, BAR);
  But, i dont know how to identify / calculate FOO or BAR!
  */
}

header {
  background-color: coral;
  padding: inherit;
}

main {
  background-color: lightgreen;
  padding: inherit;
}

footer {
  background: skyblue;
  padding: inherit;
}

p, h2 {
  margin: 0;
}

Answer 1

问题是由max-height 属性引起的，请改用height：

body {margin: 0}

#wrapper {
  display: grid;
  grid-template-rows: min-content auto min-content; /* can also use "1fr" instead of "auto" */
  grid-gap: 10px;
  height: 100vh; /* modified */
}

main {
  overflow-y: auto; /* recommended; i.e. don't show it if not needed */
}

header {
  background-color: coral;
  padding: inherit;
}

main {
  background-color: lightgreen;
  padding: inherit;
}

footer {
  background: skyblue;
  padding: inherit;
}

p, h2 {
  margin: 0;
}

<div id="wrapper">
  <header>
    <h2>header</h2>
  </header>
  <main>
    <h2>main</h2>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
    <p>THIS IS FILLER!</p>
  </main>
  <footer>
    <h2>footer</h2>
  </footer>
</div>

Answer 2

您可以执行自动调整或自动填充，例如：

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));