Wrap horizontal items starting with 2nd column

Question

I have a container in which items with varying width are stretched out as much as they can horizontally. When the window gets too narrow, they items wrap to a new row.

.container {
    background-color: "lightblue";
    border: 5px solid #000;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin: 0 auto;
}

.item {
    min-height: 100px;
    border: 5px solid #000;
    background-color: #22B14C;
    margin: 10px;
}

JSFiddle: https://jsfiddle.net/y70nzkb6/14/

But the first item is special. I never want anything positioned directly under it and there should never be a wrap break opportunity directly after it. Instead I would like all items to wrap such that the next row starts where item#0 ends horizontally (see the image below).

How can this best be done?

user_7829241 · Answer

I came up with a solution that places the wrappable items into their own inner container.

.outercontainer {
    border: 5px solid #000;
    display: flex;
    flex-direction: row;
    width: fit-content;
    margin: 0 auto;
}

.innercontainer {
    display: flex;
    flex-wrap: wrap;
}

.item {
    min-height: 100px;
    max-height: 100px;
    border: 5px solid #000;
    background-color: #22B14C;
    margin: 10px;
}

https://jsfiddle.net/y70nzkb6/17/

But it would be nice if this was possible without an extra container.

Wrap horizontal items starting with 2nd column

1 Answers