Вопрос по css, html, css3, flexbox – Это все, что связано с flex. Это вызвано плохими настройками по умолчанию в Chrome, и это исправляется, когда вы переопределяете его с помощью нормального параметра flex-shrink.

5

аюсь создать макет flexbox фиксированной высоты, который прокручивает внутреннее содержимое, когда внутреннее содержимое слишком велико.

Кроме того, если содержимое не вызывает прокрутку, я хочу зафиксировать div с кнопками в нижней части контейнера.

У меня есть макет, который отлично работает в Firefox, но в Chrome нижняя кнопка div обрезает верхнюю часть содержимого, когда она достаточно велика, чтобы вызвать прокрутку.

Это правильное отображение макета в Firefox:

Вот как он неправильно отображается в Chrome:

Кроме того, именно так оно и должно себя вести, если внутреннего содержимого недостаточно для прокрутки:

.container {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid #000;
  padding: 4px;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.spacer {
  flex: 1 1 auto;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<div class="container">

  <div class="options">
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
  </div>

  <div class="spacer"></div>

  <div class="buttons">
    <input type="button" value="Cancel">
    <input type="button" value="Save">
  </div>

</div>

https://jsfiddle.net/tdghqyuu/1/

Ваш Ответ

3   ответа
9
Решение

Добавьте это к своему коду:

.container > * {
  flex-shrink: 0; 
}
объяснение

Начальная настройка гибких элементов в соответствии сспецификация flexbox, должно бытьгибкая термоусадка: 1, Это означает, что гибкие элементы могут сжиматься во избежание переполнения контейнера.

Chrome и IE11, похоже, придерживаются этого правила.

Другие браузеры, такие как Firefox, Edge и Safari,казаться иметьflex-shrink установлен в0 по умолчанию.

С другой стороны, это может иметь мало общего или не иметь ничего общего сflex-shrink, Проблема может относиться к дефолтуmin-height а такжеmin-width настройки на флекс. (Глянь сюда:Почему гибкие элементы не уменьшаются до размера контента?)

Или, может быть, это сочетание обоих. Это действительно зависит от браузера.

Дело в том, что реализации браузера различаются. Вот почему вы должны проверить.

Начальные настройки спецификации не совсем надежны, потому что

браузеры представляют собой независимые объекты, которые могут делать все, что они хотят, ииспользование «вмешательств».

Вмешательства

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

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

Хром, кажется, делает это много. Вот некоторые примеры:

Почему гибкие элементы не уменьшаются до размера контента? (см. заметки в браузере)псевдоэлемент не выравнивается в левом верхнем углуНаправление привязки к окну просмотра Google Chrome с помощью flexboxКак сделать так, чтобы изображения оставались в строках контейнера css?Почему процентная высота работает на детей, когда родитель не имеет определенной высоты?

Одно можно сказать наверняка: если вы отключитеflex-shrinkваш макет будет работать во всех браузерах. Добавьте это к своему коду:

.container > * {
  flex-shrink: 0; 
}

.container>* {
  flex-shrink: 0;
}

.container {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid #000;
  padding: 4px;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  /* new; for demo only */
}
<div class="container">

  <div class="options">
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
  </div>

  <div class="buttons">
    <input type="button" value="Cancel">
    <input type="button" value="Save">
  </div>

</div>

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

.container {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
  border: 1px solid #000;
  padding: 4px;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto; /* NEW */
  flex: 1;          /* NEW; may be necessary for overflow to work in some browsers */

}

.container > * {
  flex-shrink: 0;
}

.container {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
  border: 1px solid #000;
  padding: 4px;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto; /* NEW */
  flex: 1;          /* NEW; may be necessary for overflow to work in some browsers */
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px; /* new; for demo only */
}
<div class="container">

  <div class="options">
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
  </div>

  <div class="buttons">
    <input type="button" value="Cancel">
    <input type="button" value="Save">
  </div>

</div>

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

«обеспечить значительно улучшенное взаимодействие с пользователем», например, когда все элементы вашей страницы отображаются друг на друге в беспорядочной путанице. Спасибо Chrome! Я ожидал этого от IE, хотя. Andrew Koster
0

.container не должен быть "гибким",min-height собственность для.options может хватит:

        .container {
            height: 150px;
            width: 300px;
            /*display: flex;*/
            flex-direction: column;
            overflow-y: auto;
            border: 1px solid #000;
            padding: 4px;
        }

        .options {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            min-height: 125px;
        }

        .options > div
        {
            display: inline-block;
        }

        .spacer {
            flex: 1 1 auto;
        }

        .buttons {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
<div class="container">

        <div class="options">
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
            <div class="option">
                <input type="checkbox"> Option
            </div>
        </div>

        <div class="spacer"></div>

        <div class="buttons">
            <input type="button" value="Cancel">
            <input type="button" value="Save">
        </div>

    </div>

-2

что вы видите, это опции, переполняющие его контейнер (<div class="options"> элемент). Сам элемент имеет правильный размер, но сам контейнер имеет фиксированную высоту. Если вы добавитеoverflow: hidden или жеoverflow: scroll в.options, он будет отображаться так, как вы ожидаете (хотя вам может не понадобиться полоса прокрутки).

Это все, что связано с flex. Это вызвано плохими настройками по умолчанию в Chrome, и это исправляется, когда вы переопределяете его с помощью нормального параметра flex-shrink. Andrew Koster

Похожие вопросы