Обработка переполнения в многоколоночной компоновке

Ситуация переполнения возникает, когда размер элемента больше, чем размер колонки. Например, такая ситуация может возникнуть, когда изображение в колонке шире значения column-width или ширины колонки, определяемой числом колонок, указанным с помощью column-count.

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

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <img
    alt="A close-up of two hot air balloons being inflated."
    src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
}

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

Если вы хотите, чтобы изображение соответствовало рамкам колонки, установка max-width: 100% предотвратит рост изображения за пределы контейнера — в данном случае, за пределы колонки.

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
}
img {
  max-width: 100%;
}

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

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

В примере ниже показано такое поведение переполнения. Контейнер multicol имеет установленную height, и текста больше, чем места для создания колонок; в результате, мы получаем колонки, созданные за пределами контейнера.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 200px;
  height: 180px;
  border: 2px dashed;
}

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

В примере ниже мы использовали min-height @media query, чтобы убедиться, что есть достаточно вертикального пространства перед применением свойств колонок.

body {
  font: 1.2em / 1.5 sans-serif;
}

@media (min-height: 300px) {
  .container {
    column-width: 200px;
  }
}

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