Flexbox для контейнера фиксированной высоты, который оборачивает элементы и имеет динамическую ширину

Question

У меня есть сценарий использования, который чувствует, что , как и flexbox CSS, может быть в состоянии обработать, но я не могу заставить его работать должным образом. Я не уверен, что этот вариант использования выходит за рамки того, с чем может справиться flexbox, поэтому я ищу совет. (Я написал JavaScript, который делает то, что мне нужно, но я смотрю на это, чтобы понять, возможна ли чистая реализация CSS.)

У меня есть один контейнерный блок, который будет содержать 1 или более элементов. Каждый из содержащихся элементов имеет фиксированную ширину и высоту. Контейнер div имеет фиксированную высоту, но должен занимать столько же ширины, сколько требуется, чтобы содержать его элементы Элементы должны быть расположены внутри div сверху вниз и должны переноситься в новый столбец, когда они «заполняют» предыдущий столбец.

Вот пример HTML-кода, который я использую для тестирования:

<div class="my-container">
    <div class="my-item">Item 1</div>
    <div class="my-item">Item 2</div>
    <div class="my-item">Item 3</div>
    <div class="my-item">Item 4</div>
    <div class="my-item">Item 5</div>
    <div class="my-item">Item 6</div>
    <div class="my-item">Item 7</div>
    <div class="my-item">Item 8</div>
    <div class="my-item">Item 9</div>
    <div class="my-item">Item 10</div>
    <div class="my-item">Item 11</div>
    <div class="my-item">Item 12</div>
    <div class="my-item">Item 13</div>
    <div class="my-item">Item 14</div>
    <div class="my-item">Item 15</div>
    <div class="my-item">Item 16</div>
    <div class="my-item">Item 17</div>
    <div class="my-item">Item 18</div>
    <div class="my-item">Item 19</div>
    <div class="my-item">Item 20</div>
    <div class="my-item">Item 21</div>
    <div class="my-item">Item 22</div>
    <div class="my-item">Item 23</div>
    <div class="my-item">Item 24</div>
    <div class="my-item">Item 25</div>
</div>

А вот CSS, который я использую для тестирования:

    .my-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        background-color: rgb(33, 150, 243);
        padding: 15px;
        height: 600px;
    }

    .my-item {
        width: 250px;
        height: 25px;
        color: white;
        padding: 10px;
        flex: 0 0 auto;
    }

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

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

Если я изменю атрибут отображения для my-container с «flex» на «inline-flex», ширина контейнера уменьшается, но не настолько, чтобы показывать больше, чем первый столбец, а последующие столбцы не видны полностью .

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

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

Может ли flexbox CSS решить эту проблему? Если нет, то есть ли другие подходы на основе CSS? У меня уже есть реализация JavaScript, которая делает это, я просто предпочел бы иметь чистую реализацию CSS, если это возможно.

Answer 1

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

  .my-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, minmax(45px, 1fr));
    background-color: rgb(33, 150, 243);
    padding: 15px;
    height: 600px;
    width: fit-content;
}

.my-item {
    width: 250px;
    height: 25px;
    color: white;
    padding: 10px;
    flex: 0 0 auto;
}

JSFiddle Demo: https://jsfiddle.net/92sak0zc/6/