带有可展开的可滚动行的 CSS 网格

Question

我有一个单列两行的 CSS 网格。

我希望第一行有空间时展开，没有空间时滚动。

我希望第二行保留在 div 的底部。

我尝试在第一行使用display: flex;。

HTML：

<div class="parent">
  <span class="top">my<br>long<br>long<br>long<br>content</span>
  <span class="bottom">always visible</span>
</div>

CSS：

body {
  overflow-y: hidden;
}

.parent {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 0fr;
}

.top {
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

span {
  border: solid; 
}

https://jsfiddle.net/9re86f2a/

我希望第一行在没有空间时滚动，但实际上它的大小保持不变。

---

我希望当有空间时第一行会扩大，但实际上它的大小保持不变。

---

Answer 1

您的代码中没有任何内容会触发溢出条件。

为了让内容溢出，它需要超过宽度或高度限制（例如height: 300px），然后触发滚动条。

来自MDN：

为了使overflow 生效，块级容器必须设置高度（height 或max-height）或将white-space 设置为nowrap。

换句话说，如果没有固定的高度，您将无法获得垂直滚动条... 在 Chrome 中！ 然而，具有讽刺意味的是，在 MDN 的产品 Firefox 和 MDN 的 Edge 中上面的规则不适用，你的布局工作得很好。

.parent {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 0fr;
  grid-gap: 2px;
  background-color: black;
  height: 100vh;
}

.top {
  overflow-y: auto;
}

span {
  background-color: white;
}

body {
  margin: 0;
}

<div class="parent">
  <span class="top">my<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content</span>
  <span class="bottom">always visible</span>
</div>

jsFiddle demo

---

关于浏览器渲染差异的注意事项：我只能推测为什么 Firefox 和 Edge 在没有定义高度的块级容器上渲染滚动条或最大高度，由 MDN 指定（见上文）。他们可能正在参与intervention，或者可能对specification 有与MDN 贡献者不同的解释。

Answer 2

即使网格做得很好，我也会将 flex 模型用于这种行为；）

html * {
  box-sizing:border-box;
  padding:0.25em;
  margin:0;
}
body {
  height:100vh;
}
.parent {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
.top {
  flex-grow: 1;
  overflow: auto;

  /* style aside */
  background:lightblue;
  margin:2px;/* or 0 */
  border:solid;
}
.bottom {
  flex-shrink: 0;

  /* style aside */
  background:tomato;
  margin:2px;/* or 0 */
  border:solid;
}
 /* demo purpose */
.top .demo {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: 1.5s;
}
.top:hover .demo {
  max-height: 300vh;
}

<div class="parent">
  <span class="top"><b>Hover me to show my long content</b>
  <span class="demo"><br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content</span>
  </span>
  <span class="bottom">always visible</span>
</div>