Минимальное содержание сетки CSS не уменьшается, чтобы исправить размер

coderatchet спросил: 03 февраля 2018 в 11:04 в: html

Я новичок в сетках, и я пытаюсь понять некоторые понятия размера ячейки.

У меня есть контейнер, который установлен в display: grid и main, в центре которого находится столбец / строка min-content.

.main-container {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-rows: 1fr min-content 1fr;
}.main-container main {
  grid-column: span 1
  grid-column-start: 2
  grid-row: span 1
  grid-row-start: 2
}canvas {
  width: 800px;
  height: 600px;
}

и html

<!-- page -->
<html>
...
<body>
  <div class="main-container">
    <main>
      <canvas />
    </main>
  </div>
</body>
</html>

codepen example

Приложение будет сосредоточено вокруг событий холста, и из-за характера пропорций в рендеринге холста я хочу, чтобы ячейка центральной сетки соответствовала размеру холста, а не Другим способом.

Я ожидаю, что из-за того, что оба main и canvas являются border-box 'ed, а размер холста является абсолютным , то элемент main должен теоретически не влиять на вычисленную высоту min-content. это не относится к ширине, но как-то высота добавляет 4 дополнительных пикселя.

Где эти появляются дополнительные пиксели высоты и как я могу убедиться, что они не отображаются

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

0 ответов