固定高度容器的Flexbox，它包裹项目并具有动态宽度

Question

我有一个用例，感觉像Flexbox CSS应该能够处理，但我无法使其正常工作。我不确定此用例是否超出了Flexbox可以处理的内容，因此我正在寻找建议。(我写了javaScript来完成我需要的事情，但是我正在考虑这一点，以查看纯CSS实现是否可行。(

我有一个容器Div，其中包含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填充了视口的整个宽度。我需要容器div仅足够宽即可包含其物品。

如果我将my-container的显示属性从" flex"更改为" inline-flex"，则容器的宽度会缩小，但不足以显示比第一列更大，随后的列未完全可见。

这可能是捕获22个情况之一。这些项目的尺寸固定，但需要根据容器的高度流入列。容器需要从其项目流入的列数中占据宽度。

我还研究了CSS电网，以查看这是否可能是可能的，但听起来您必须事先知道列的数量才能工作，我不知道。列的数量取决于项目的大小和容器的高度。

Flexbox CSS可以解决此问题吗？如果没有，还有其他基于CSS的方法吗？我已经有一个可以执行此操作的JavaScript实现，如果这是可行的，我只想拥有纯CSS实现。

Answer 1

您可以使用Grid的自动填充属性，因此您不需要知道列数。

  .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演示：https：//jsfiddle.net/92Sak0zc/6/