如何使用1fr网格元素上隐藏的溢出 [英] How to use overflow hidden on 1fr grid element

问题描述

因此，我有此基本设置-父网格中的画布区域和动画制作者。
父网格也位于具有1fr行的另一个网格内。
我可以通过上下拖动调整器来调整动画大小。

 画布{background-color：blue;}＃grid1 {grid-template-rows：1fr;}＃grid2 {background-color：black;显示：网格； grid-template-rows：1fr auto;溢出：隐藏；}＃canvas-area {网格行：1;背景颜色：红色；}＃animator {网格行：2;高度：200像素；}  

 < div id = grid1 > < div id = grid2> < div id = canvas-area> <画布/> < / div> < div id = animator>< / div> < / div>< / div>  

我想要canvas大于其父元素并隐藏其溢出，但这似乎也扩展了父元素。
我已经尝试过溢出：隐藏，但这不起作用

附带问题：我还注意到画布下方有4px的空间，为什么呢？

解决方案

< blockquote>

我希望画布大于其父级并隐藏其上溢，但这似乎也扩展了父级元素。

通常，您会向网格容器添加高度，以使 1fr > grid-template-rows：1fr auto 是有意义的；否则，网格项目会自动调整为其内容的尺寸。

---

添加溢出：隐藏到网格项 ＃canvas-area 以及固定高度到容器（例如，您以前的jsFiddle拥有400px）-参见下面的演示：

  document.querySelector（'button'）。onclick =（）=> {document.querySelector（'canvas'）。height = 300;}  

  canvas {background-color：blue;}＃grid {background-color：black;显示：网格； grid-template-rows：1fr auto;宽度：400px；高度：400px； / *添加了固定高度* /}＃canvas-area {grid-row：1;背景颜色：红色；溢出：隐藏； / *添加* /}＃animator {网格行：2;高度：200像素；}  

 < div id = grid > < div id = canvas-area> <画布/> < / div> < div id = animator>< / div>< / div>< button>更改画布高度< / button>  

请注意，添加最小高度：0 也不会增长容器：

  document.querySelector（'button' ）.onclick =（）=> {document.querySelector（'canvas'）。height = 300;}  

  canvas {background-color：blue;}＃grid {background-color：black;显示：网格； grid-template-rows：1fr auto;宽度：400px；高度：400像素；}＃canvas-area {网格行：1；背景颜色：红色；最低高度：0； / *添加* /}＃animator {网格行：2;高度：200像素；}  

 < div id = grid > < div id = canvas-area> <画布/> < / div> < div id = animator>< / div>< / div>< button>更改画布高度< / button>  

---

为什么？

默认网格项目具有最小宽度：自动和最小高度：自动（就像弹性商品一样）。您可以在下面看到这种行为的一些示例：

• css-grid创建一个虚构列


• 如何使图像停留在css网格容器的行内？

，根据规格：

为了为网格项提供更合理的默认最小尺寸，此
规范定义min-width / min-height的自动值以及
在指定轴上应用自动最小尺寸网格项目
的溢出可见并且跨越至少一条轨道，且其最小
轨道大小调整功能是自动的。

W3C

---

画布元素下方的空格？

我还注意到画布下有4px的空间，为什么呢？

whitespace ，它是内联元素的特征-您可以通过将其设置为块元素（添加 display：block ）或调整<$ c来删除它$ c> vertical-align 属性（添加 vertical-align：top ）：

  document.querySelector（'button'）。onclick =（）=> {document.querySelector（'canvas'）。height = 300;}  

  canvas {background-color：blue;显示：块； / *添加了* /}＃grid {background-color：黑色；显示：网格； grid-template-rows：1fr auto;宽度：400px；高度：400像素；}＃canvas-area {网格行：1；背景颜色：红色；最低高度：0； / *添加* /溢出：自动； / *添加* /}＃animator {网格行：2;高度：200像素；}  

 < div id = grid > < div id = canvas-area> <画布/> < / div> < div id = animator>< / div>< / div>< button>更改画布高度< / button>  

So I have this basic setup - a canvas area and an animator in a parent grid. The parent grid is also inside another grid with one 1fr row. I can resize the animator by dragging a resizer up and down.

canvas {
  background-color: blue;
}

#grid1 {
  grid-template-rows: 1fr;
}

#grid2 {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid1">
  <div id="grid2">
    <div id="canvas-area">
      <canvas/>    
    </div>
    <div id="animator"></div>
  </div>
</div>

I want the canvas to be bigger than its parent and hide its overflow, but that seems to also expand the parent element. I've already tried overflow: hidden, but that doesn't work

As a side question: I also noticed that there is a space of 4px under the canvas, why is that?

解决方案

I want the canvas to be bigger than its parent and hide its overflow, but that seems to also expand the parent element.

Normally you'd add a height to the grid container so that the the 1fr in the grid-template-rows: 1fr auto is meaningful; otherwise the grid item auto-adjusts to the dimensions of its contents.

---

Add overflow: hidden to the grid item #canvas-area along with a fixed height to the container (say 400px as your previous jsFiddle had) - see demo below:

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 400px;
  height: 400px; /* added a fixed height */
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  overflow: hidden; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

Note that adding min-height: 0 also does not grow the container:

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

---

Why so?

By default grid items have min-width: auto and min-height: auto (just like flex items). You can see some examples of of this behaviour below:

• css-grid creates an imaginary column
• How to make images stay within the rows of a css grid container?

and from the specs:

To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width/min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible and which span at least one track whose min track sizing function is auto.

W3C

---

Space below canvas element?

I also noticed that there is a space of 4px under the canvas, why is that?

That is the whitespace, a characteristic of inline elements - you can remove that by making it a block element (add display: block) or adjusting vertical-align property (add vertical-align: top):

document.querySelector('button').onclick = () => {
  document.querySelector('canvas').height = 300;
}

canvas {
  background-color: blue;
  display: block; /* added */
}

#grid {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
   width: 400px;
  height: 400px;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  min-height: 0; /* added */
  overflow: auto; /* added */
}

#animator {
  grid-row: 2;
  height: 200px;
}

<div id="grid">
  <div id="canvas-area">
    <canvas/>    
  </div>
  <div id="animator"></div>
</div>
<button>Change Canvas Height</button>

这篇关于如何使用1fr网格元素上隐藏的溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！