How To Use Overflow Hidden On 1fr Grid Element

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 r

Solution 1:

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;
}

<divid="grid"><divid="canvas-area"><canvas/></div><divid="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;
}

<divid="grid"><divid="canvas-area"><canvas/></div><divid="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;
}

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