Почему столбец сетки CSS 1fr нейтрализует «переполнение: прокрутка» его дочерних <pre>блоков и почему minmax (1px, 1fr) исправляет это? - PullRequest
Новая
       9

Почему столбец сетки CSS 1fr нейтрализует «переполнение: прокрутка» его дочерних <pre>блоков и почему minmax (1px, 1fr) исправляет это?

0 голосов
/ 01 октября 2018

В этой HTML-структуре, которая находится внутри элемента <body> (демонстрация здесь) : 

<div class="grid-1">
<header>
  <a href="/">Home</a>
</header>
<main>
  <article>
    <h1>Test</h1>
    <h2 id="overview">Overview</h2>
    <p>Lorem ipsum.</p>
    <div>
      <div>
        <pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Заключение

Lorem ipsum.

, как вы можете видеть, второй дочерний элемент(т. е. элемент <main>) содержит блок <pre> с несколькими длинными строками кода.

Когда эта таблица стилей CSS применяется к этой структуре HTML: 

html,
body {
  margin: 0;
  padding: 0;
}

.grid-1 {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

header {
  background: hsl(209, 36%, 90%);
  padding: 10px;
}

main {
  background: hsl(209, 36%, 80%);
  padding: 10px;
}

footer {
  background: hsl(209, 36%, 70%);
  padding: 10px;
}

pre {
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto;
}

Второйстолбец растягивается, чтобы вместить все строки блока <pre>, что делает overflow-x: auto; в блоке <pre> эффективным игнорированием, и выталкивает третий столбец из вида и вправо:

Grid 1fr 1fr 1fr

Однако, если я изменю grid-template-columns: 1fr 1fr 1fr; на grid-template-columns: 1fr minmax(1px, 1fr) 1fr;, все три столбца будут иметь одинаковую ширину, и overflow-x: auto; блока <pre> вступит в силу.

grid 1fr minmax(1px, 1fr) 1fr

Если я не ошибаюсь, в этом сценарии minmax(1px, 1fr) должен разрешиться до 1fr и сделать вторую сетку фактически идентичной первой сетке.Тогда почему он меняет способ отображения сетки?

1 Ответ

0 голосов
/ 03 октября 2018

Это поведение можно объяснить по умолчанию min-width столбцов сетки, а также о том, как браузеры интерпретируют функцию minmax.

По умолчанию min-width столбцов сетки

По умолчаниюстолбцы сетки имеют min-width auto.Как упоминалось в Предотвращение выброса сетки , это приведет к тому, что столбец будет «неопределенного размера» , что означает, что его содержимое может влиять на его ширину и расширять его.

Это поведение можно изменить, установив для min-width столбца значение, отличное от auto, например 0px, 1px или что-либо еще, что имеет смысл.

Как minmax(1px, 1fr) иminmax(auto, 1fr) интерпретируется браузерами

Согласно справочной странице MDN для minmax:

Функция, принимающая два параметра, min и max .

Каждый параметр может быть значением <length>, <percentage>, <flex> или одним из значений ключевых слов max-content, min-content или auto.

Если max , то max игнорируется и minmax(min,max) рассматривается как min .Как максимум, значение <flex> устанавливает коэффициент гибкости дорожки сетки;как минимум, он недействителен.

Однако он не объясняет, если minmax при применении к столбцу сетки изменяет поведение width или min-width и max-widthСвойства?

Оказывается, minmax, по крайней мере, в этом случае, интерпретируется так: 

min-width: 1px;
max-width: 1fr;

Аналогично, minmax(auto, 1fr) будет интерпретироваться так: 

min-width: auto;
max-width: 1fr;

Но, как объяснялось ранее, в зависимости от содержимого столбца, min-width: auto; позволит браузеру расширить ширину столбца даже за пределы 1fr - потенциальная точка путаницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...