Предотвратить расширение области сетки, заставляя прокручивать всю страницу

Question

Я использую следующую сетку:

grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;

Чтобы создать центрированную область, которая заполняет большую часть экрана, оставляя некоторые отступы вокруг него.Внутри этой 1fr x 1fr области сетки находится pane div, который содержит editor div, который содержит content div.

Div content может быть любой высоты, а div editorимеет overflow: scroll установлен.Моя проблема заключается в том, что вместо pane, сохраняющего тот же размер, и editor, обрабатывающего переполнение, pane увеличивается и вызывает прокрутку всей страницы.

Я могу предотвратить рост pane, установив егоoverflow: scroll, но это вызывает прокрутку самого редактора, а не его содержимого.Это недопустимо, потому что в редакторе есть кнопки, которые всегда должны быть на экране.

Есть ли способ, в рамках сетки, разрешить эту функцию?Изначально он работал с гибкой раскладкой, где pane div был одним элементом внутри 100% x 100% flexbox.Я переключился на сетку, чтобы позволить мне легко изменять размеры боковых меню, поэтому реализация этого без сетки не является предпочтительной.

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

Вот jsfiddle с моим воспроизведением моей проблемы.

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;
  grid-template-rows: 10em 1fr 10em;
  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
}

#editor {
  display: relative;
  overflow: scroll;
}

#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
    <div id='content'>  
    </div>
  </div>
</div>
</div>

Answer 1

min-width: auto / min-height: auto

Вообще говоря, элемент сетки не может быть меньше его содержимого.Минимальный размер элементов сетки по умолчанию - min-width: auto и min-height: auto.

. Это часто приводит к тому, что элементы сетки переполняют их области сетки или контейнеры сетки.Он также предотвращает рендеринг полос прокрутки на элементах, поскольку условие переполнения не может быть запущено (элемент сетки просто продолжает расширяться).

Чтобы переопределить это значение по умолчанию (и позволить элементам сетки уменьшаться до размера их содержимого)вы можете использовать min-width: 0, min-height: 0 или overflow с любым значением, отличным от visible.

Это поведение со ссылками на официальную документацию объясняется в этом посте:

• Запрет содержимого от расширения элементов сетки

---

1fr

Следует также отметить, что 1fr означает minmax(auto, 1fr).Это также означает, что дорожка, к которой она применяется, не может сжаться ниже размера контента (т. Е. Значение min в функции minmax() равно auto, то есть основано на содержании).

Поэтому, чтобы переопределить этот параметр, используйте minmax(0, 1fr) вместо 1fr.

Подробнее здесь: https://github.com/w3c/csswg-drafts/issues/1777

---

пересмотренная демонстрация (проверенов Chrome, Firefox и Edge)

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;

  /* grid-template-rows: 10em 1fr 10em; */
  grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */

  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
  overflow: auto; /* new */
}

#editor {
  /* display: relative; */
  /* overflow: scroll; */
}

#content {
   height: 2000px;
}

<div id='site'>
  <div id='pane'>
    <div id='editor'>
      <div id='content'></div>
    </div>
  </div>
</div>

jsFiddle demo

Answer 2

Не уверен на 100%, если это то, что вы спрашиваете.Я добавил оболочку к содержимому, чтобы его можно было прокручивать, и установил для него высоту vh, которую можно настроить.

#content-scroll {
   height: 40vh;
   overflow: scroll;
}
#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
  <div id='content-scroll'>
    <div id='content'>

    </div>
    </div>
  </div>
</div>
</div>

https://jsfiddle.net/16owL8x0/