Почему flex-shrink ведет себя так в моем примере?

Не могли бы вы дать мне объяснение, что здесь происходит? (Если возможно, прикрепите ссылки на спецификацию CSS)

Когда я устанавливаю гибкая усадка в 0 на #сетка-контейнер (flex: 1 0 auto), появляется полоса прокрутки для всей страницы.

Но когда я устанавливаю гибкая усадка в 1 на #сетка-контейнер (flex: 1 1 auto), полоса прокрутки появляется только для #grid-container

В приведенном ниже фрагменте кода гибкая усадка на #сетка-контейнер установлено значение 0 (flex: 1 0 auto). Измените его на 1(flex: 1 1 auto), чтобы увидеть разницу

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;
}

#list {
  overflow: auto;
}

#list-item {
  font-size: 140px;
}

<html>
<head>
  <meta charset = "utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id = "header"></div>
  <div id = "grid-container">
    <div id = "grid-item">
      <div id = "list">
        <div id = "list-item">1</div>
        <div id = "list-item">2</div>
        <div id = "list-item">3</div>
        <div id = "list-item">4</div>
        <div id = "list-item">5</div>
        <div id = "list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

flex идет к дочерним элементам, а не к гибкому контейнеру.

— 28.03.2019 16:45

html css flexbox

28.03.2019 12:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Установив flex-shrink:1 (значение по умолчанию), вы позволяете своему элементу сжиматься внутри своего гибкого контейнера, и, поскольку вы устанавливаете body (гибкий контейнер) равным height:100%, он будет уменьшаться, чтобы поместиться внутри него, создавая полосу прокрутки только в контейнере, потому что его содержание переполненный. Точнее, полоса прокрутки включена #grid-item, а не контейнер, что логично, поскольку у этого есть overflow:auto.

Добавьте границу, чтобы лучше видеть это:

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;  
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

<html>
<head>
  <meta charset = "utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id = "header"></div>
  <div id = "grid-container">
    <div id = "grid-item">
      <div id = "list">
        <div id = "list-item">1</div>
        <div id = "list-item">2</div>
        <div id = "list-item">3</div>
        <div id = "list-item">4</div>
        <div id = "list-item">5</div>
        <div id = "list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Вы также можете установить overflow:auto на контейнер, и у вас будет прокрутка на контейнере и почти такой же результат.

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: auto;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2; 
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

<html>
<head>
  <meta charset = "utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id = "header"></div>
  <div id = "grid-container">
    <div id = "grid-item">
      <div id = "list">
        <div id = "list-item">1</div>
        <div id = "list-item">2</div>
        <div id = "list-item">3</div>
        <div id = "list-item">4</div>
        <div id = "list-item">5</div>
        <div id = "list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Отключив сжатие, элемент и его содержимое выйдет за пределы тела, а также html, который создаст полосу прокрутки в области просмотра, чтобы можно было увидеть переполненный контент. Добавление overflow:auto в этом случае бесполезно, так как высота родителя совпадает с высотой содержимого.

Добавьте фон к элементам body/html, чтобы лучше видеть переполнение при отключении сжатия.

html {
  height: 100%;
  background:#fff; /*to stop the propagation of the red color*/
  border:5px dotted purple;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 0 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;  
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
}

#list-item {
  font-size: 140px;
}

<html>
<head>
  <meta charset = "utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id = "header"></div>
  <div id = "grid-container">
    <div id = "grid-item">
      <div id = "list">
        <div id = "list-item">1</div>
        <div id = "list-item">2</div>
        <div id = "list-item">3</div>
        <div id = "list-item">4</div>
        <div id = "list-item">5</div>
        <div id = "list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Связано: Почему flex-child ограничен родительским размером?

В качестве примечания: если вы удалите overflow:hidden из контейнера, результат будет одинаковым для обоих случаев:

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;   /*will do nothing*/
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

<html>
<head>
  <meta charset = "utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id = "header"></div>
  <div id = "grid-container">
    <div id = "grid-item">
      <div id = "list">
        <div id = "list-item">1</div>
        <div id = "list-item">2</div>
        <div id = "list-item">3</div>
        <div id = "list-item">4</div>
        <div id = "list-item">5</div>
        <div id = "list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Это связано с Автоматический минимальный размер элементов Flex, который предотвратит эффект сжатия.

Отличный ответ, он сэкономил мне много времени. Также я понял, что этот Автоматический минимальный размер применяется и к элементам сетки.

— 28.03.2019 18:58

28.03.2019 12:27