How to use overflow hidden on 1fr grid element

Question

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?

here is for the last question: https://stackoverflow.com/a/50784328/8620333 — Temani Afif, Apr 20 '19 at 12:43
Already tried, doesn't work Edit: For some reason it works in this jsfiddle and not in my code -_- — IBronchart, Apr 20 '19 at 12:45
what you mean by `doesn't work` ? what's actually happening ? [check this demo](https://jsfiddle.net/azfnkbs6/) — Rainbow, Apr 20 '19 at 12:46
It behaves as if there was no overflow hidden, so it expands the parent div — IBronchart, Apr 20 '19 at 12:48
Okay I made the jsfiddle reflect my code more and now overflow hidden doesn't work anymore @ZohirSalak — IBronchart, Apr 20 '19 at 13:01
That's because you removed the fixed height and width you had, a parent height is auto by default meaning it depends on the children, it will exapnd to make room for them unless you define a height then there will be overflow and only then where `overflow:hidden` will take effect — Rainbow, Apr 20 '19 at 13:09
If you'd think about, you want to hide the canvas if it goes out of bounds, so you have to define those bounds — Rainbow, Apr 20 '19 at 13:39

kukkuz · Accepted Answer · 2019-05-05T06:23:42.437

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:

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>

Okay I made the jsfiddle reflect my code more and now overflow hidden doesn't work anymore. @kukkuz — IBronchart, Apr 20 '19 at 13:02
@IBronchart the first row is 1fr and you do not have *defined* height for your *grid container* so it is expected to grow — kukkuz, Apr 20 '19 at 13:06
Yeah sorry about that. Is there a way to fix it without setting a defined height? — IBronchart, Apr 20 '19 at 13:08

How to use overflow hidden on 1fr grid element

1 Answers1

Why so?

Space below canvas element?

Linked