Минимальный размер содержимого в CSS Grid

Иногда при создании компонента вы внезапно замечаете странную горизонтальную полосу прокрутки. Вы продолжаете попытки все исправить, только для того, чтобы со временем понять, что причина в другом. Сколько раз вы обнаруживали себя в этой ситуации?

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

Прежде чем начать статью, я хочу сначала озвучить некоторые нюансы. Вот несколько вещей, которые следует иметь в виду:

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

Учитывая вышесказанное, давайте приступим.

Что нужно получить в итоге

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

Минимальный размер содержимого в CSS GridОпределим проблему

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

Минимальный размер содержимого в CSS Grid

Контейнеру прописан display: flex без переноса флекс-элементов, чтобы содержимое могло оставаться в той же строке. Плюс к этому, я использовал overflow-x: auto, чтобы разрешить прокрутку по оси X.

.section {
  display: flex;
  overflow-x: auto;
}

Однако это не дало никакого эффекта. Что странно, так как я был уверен, что этого достаточно чтобы сделать контейнер с горизонтальной прокруткой.

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

Минимальный размер содержимого в CSS Grid

Странно, правда? Когда я впервые увидел это, я задал себе следующие вопросы:

  • Я забыл добавить overflow-x: hidden?
  • Что-то не так с флексбоксом?

Перепроверив все дважды, — я убедился что все настроено и должно работать как нужно. В этот момент, я подумал что использование гридов на родительском элементе может вызывать такое поведение. Я проверил — и это подтвердилось. Гриды рушили раскладку.

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

Почему это происходит

Вы можете подумать, почему проблема в гридах? Вот раскладка разделов main и aside:

<div class="wrapper">
  <main>
    <section class="section"></section>
  </main>
  <aside></aside>
</div>
@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}

Основному блоку присвоено значение 1fr. Это означает, что он займет доступное пространство за вычетом боковой панели и ширины указанной в gap. Это на 100% верно. Однако, минимальный размер содержимого элемента сетки — auto. Что означает что элемент грида может увеличиваться в ширину из-за длинного содержимого (в нашем случае это контейнер с горизонтальной прокруткой).

Как исправить проблему

Решение состоит в том, что нам нужно установить минимальный фиксированный размер вместо автоматического. Мы можем сделать это с помощью функции minmax().

.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  grid-gap: 40px;
}

Проблема решена. Но кроме этого, мы так же можем решить её и на уровне элемента грида. Вот CSS-правила, которые мы можем применить к элементу .main:

  • Установить min-width: 0;
  • Или, задать overflow: hidden;

В зависимости от контекста вы можете использовать одно из двух вышеперечисленных правил. Однако у них могут быть некоторые побочные эффекты, особенно у overflow: hidden.

Представьте, что у дочернего элемента основного раздела есть декоративный псевдоэлемент, расположенный за пределами основных границ. В таком случае применение overflow: hidden обрежет этот псевдоэлемент.

Минимальный размер содержимого в CSS GridНа рисунке выше у нас есть два элемента, которые расположены за пределами основного раздела (кнопка «Поделиться» слева и декоративная форма внизу справа).

Учитывайте это, при выборе решения, которое лучше всего подходит для вашего сценария.

Рубрики: Новости
×
Обсудить проект
Заполните форму и мы с Вами свяжемся
×