Создание перекрывающихся гибких элементов

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

Подход Flexbox

Чтобы добиться перекрытия, мы можем использовать следующий подход:

overflow: visible;

width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

• Оберните каждый гибкий элемент в div .cardWrapper.
• По умолчанию для .cardWrapper установлено значение переполнения: скрыто. Это скроет любое переполнение дочернего .card.
• Используйте :last-child или :hover, чтобы последний элемент или наведенные элементы отображали свое переполнение.
• Установите для элементов .card значение иметь фиксированную и минимальную ширину, чтобы предотвратить их сжатие.
• Скройте любое переполнение из элементов .card, используя overflow: скрытый.