具有可扩展行的可滚动行的CSS网格 [英] CSS grid with scrollable row that expands

问题描述

我有一个CSS网格，其中只有一列和两行.

我希望第一行在有空间时扩展，在没有空间时滚动.

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

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

HTML:

 < div class ="parent">< span class ="top"> my< long< long< br> long< br>含量</span>< span class ="bottom">始终可见</span></div> 

CSS:

  body {溢出-y:隐藏;}.parent {显示:网格；grid-template-columns:自动；grid-template-rows:1fr 0fr;}.最佳 {溢出-y:滚动；显示:flex;flex-direction:列;}跨度 {边框:实心；} 

:

为了使 overflow 生效，块级容器必须具有设置的高度( height 或 max-height )或空白设置为 nowrap .

换句话说，没有固定的高度，您将不会获得垂直滚动条...在Chrome中是！具有讽刺意味的是，在MDN的产品Firefox和MDN的Edge中，上面的规则不适用，您的布局也可以正常工作.

  .parent {显示:网格；grid-template-columns:自动；grid-template-rows:1fr 0fr;grid-gap:2px;背景颜色:黑色；高度:100vh；}.最佳 {溢出-y:自动;}跨度 {背景颜色:白色；}身体 {边距:0;}  

 < div class ="parent">< span class ="top"> my< long> long< br><<>< br>长
长
内容
长
长
长
内容
长
长
长
长
br<<><<><<><<><<><<><<><<><<><<><>长
长
长长
长长
长
长长
长长
长长
长长
br内容
 long 
内容内容内容内容内容内容内容内容内容内容内容内容t; br> long的含量
 long 
 long的含量
 long的含量
 long的含量
 long的含量
 long的含量br＞长＜br＞长＜br＞长＜br＞长％span< span class ="bottom">始终可见</span></div>  

jsFiddle演示

---

关于浏览器渲染差异的说明: 我只能推测为什么Firefox和Edge在没有定义高度的块级容器上渲染滚动条或max-height(由MDN指定)(请参见上文).他们可能参与了 干预 ，或者对比MDN贡献者 规范 .

I have a css grid with a single column and two rows.

I want the first row to expand when there is space and to scroll when there is no space.

I want the second row to remain at the bottom of the div.

I have tried using display: flex; in the first row.

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/

I expect the first row to scroll when there is no space, but it actually remains the same size.

---

I expect the first row to expand when there is space, but it actually remains the same size.

---

解决方案

There's nothing in your code that triggers an overflow condition.

In order for content to overflow, it needs to exceed a width or height limitation (e.g. height: 300px), which then triggers the scrollbar.

From MDN:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

In other words, without a fixed height, you won't get the vertical scrollbar... in Chrome! Ironically, however, in Firefox, a product of MDN, and Edge, the MDN rule above doesn't apply, and your layout works just fine.

.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

---

Note on browser rendering differences: I can only speculate as to why Firefox and Edge render a scrollbar on a block-level container that doesn't have a defined height or max-height, as specified by MDN (see above). They could be engaging in an intervention or may have a different interpretation of the specification than the MDN contributors.

这篇关于具有可扩展行的可滚动行的CSS网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！