Как использовать переполнение, скрытое на элементе сетки 1fr

Question

Итак, у меня есть эта базовая настройка - область холста и аниматор в родительской сетке. Родительская сетка также находится внутри другой сетки с одной строкой 1fr. Я могу изменить размер аниматора, перетаскивая его размер вверх и вниз.

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>

Я хочу, чтобы холст был больше, чем его родитель, и скрывал его переполнение, но это также расширяет родительский элемент. Я уже пробовал overflow: hidden, но это не работает

В качестве дополнительного вопроса : Я также заметил, что под холстом есть пространство 4px, почему это так?

Answer 1

Я хочу, чтобы холст был больше, чем его родитель, и скрывал его переполнение, но это также расширяет родительский элемент.

Обычно вы добавляете высоту к сетке контейнера , чтобы значение 1fr в grid-template-rows: 1fr auto имело смысл; в противном случае элемент сетки автоматически подстраивается под размеры его содержимого.

---

Добавьте overflow: hidden к элементу сетки #canvas-area вместе с фиксированной высотой к контейнеру (скажем, 400px, как у вашего предыдущего jsFiddle) - см. Демонстрацию ниже:

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>

Обратите внимание, что добавление min-height: 0 также не увеличивает контейнер:

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>

---

Почему так?

По умолчанию элементы сетки имеют min-width: auto и min-height: auto (точно так же, как элементы flex). Вы можете увидеть некоторые примеры такого поведения ниже:

• css-grid создает воображаемый столбец
• Как заставить изображения оставаться в строках контейнера сетки css?

и из спецификации:

Чтобы обеспечить более разумный минимальный размер по умолчанию для элементов сетки, это спецификация определяет, что автоматическое значение min-width / min-height также применяет автоматический минимальный размер по указанной оси к элементам сетки чье переполнение является видимым и которое охватывает по крайней мере одну дорожку Функция определения размера дорожки - автоматическая.

W3C

---

Пробел под элементом холста?

Я также заметил, что под холстом есть пространство 4px, почему?

Это пробел , характерный для встроенных элементов - вы можете удалить его, сделав его блочным элементом (добавьте display: block) или настроив свойство vertical-align (добавьте 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>