Я пытаюсь центрировать div, удовлетворяя при этом нескольким другим условиям.
Мой пользовательский интерфейс - это набор плиток, который динамически добавляется, но имеет фиксированную ширину.
Я хочу набор плитоквсегда быть в центре.Вертикально и горизонтально (v & h).
Оно также не должно превышать определенной ширины.Для этого примера допустим, что максимальная ширина составляет 400 пикселей.
Если div превышает 400 пикселей при добавлении плиток, он должен разбить следующие плитки на другую строку.Когда это происходит, div должен снова центрироваться (v & h).
Если div не превышает 400px (меньше плиток), плитки должны по-прежнему центрироваться v & h.
Когда контейнер плиток превышает высоту экрана, он должен стать прокручиваемым.Это должно происходить так, что первая плитка будет лежать сверху, а плитки внизу должны быть скрыты.
Вот набросок того, что я имею в виду:
Красная плитка - это первая плитка.
Итакчтобы добиться этого, я установил абсолютную позицию контейнера плитки и установил максимальную ширину и максимальную высоту.
.tile-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
border: 2px solid green;
max-width: 400px;
max-height: 100vh;
overflow-y: auto;
}
Таким образом, он всегда центрируется по v & h, прокручивается при достижении максимальной высоты, он центрирует v & h, когда плиток мало.
Но проблема в том, что он не достигает своей максимальной ширины.
В приведенном мною примере скриптамаксимальная ширина контейнера составляет 400 пикселей, но он перестает расширяться после 294 пикселей.
Если я использую flex для этого, он портит прокручиваемую часть, где первая плитка должна располагаться сверху.
Что я здесь не так делаю?
Вот скрипка .