4-й столбец отображается при указании столбца-столбца 3

Question

Я пытаюсь использовать столбцы-столбцы css в сочетании с дополнением CSS, и я наблюдаю, что если я укажу число столбцов 3, браузер отображает часть четвертого столбца, если содержимое не подходит. как показано ниже

Вот JSFidle ->https://jsfiddle.net/w40jcykp/1/

Я вижу это в Chrome & Edge. это известная проблема, или есть обходное решение для этого?

Благодарим вас.

CSS ниже.

.newspaper { 
    column-count: 3; 
    min-height:144px; 
    height:144px; 
    padding:20px; 
    column-gap:10px; 
    border: 1px solid black; 
    overflow:hidden; 
} 

Answer 1

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

Если вы отключите overflow: hidden в своей скрипке, вы увидите, что на самом деле у вас больше колонок, переполненных со стороны вашего окна. padding позволяет только часть одной из них быть видимой.

Основная причина здесь балансировка по высоте. From MDN:

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

Однако в некоторых ситуациях это также полезно установить максимальную высоту столбцов в явном виде, а затем выложить содержимое, начиная с первого столбца и создать столько столбцов, сколько необходимо, возможно, перелива вправо. Поэтому, если высота ограничена, то с помощью , устанавливающего свойства высоты CSS или max-height в многоколоночном блоке , каждому столбцу разрешено расти до этой высоты и не следует дополнительно перед добавлением нового столбца. Этот режим также намного эффективнее для макета .

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

Вам нужно будет удалить фиксированную высоту, если вы хотите, чтобы ваши столбцы росли и правильно работали и подчинялись вашей собственности column-count.