Flexbox layout question

[tomliv]

Is it possible to have one element, an image for example, next to 3 direct siblings in a flex row without having a wrapper around the 3 siblings?


Thanks

 

[Johna]

You could add flex-grow: 1; to the sibling elements so that they will take up the maximum available space.

 

[tomliv]

Yes. I realize now I forgot to mention the 3 siblings would be stacked one over the other next to the image.

See: CleanShot 2023-09-21 at 09.31.25

 

[OldMan]

There may be some intricate way of doing this, but why waste time looking for it? If the four objects are the only thing on the row use two columns instead, otherwise, the wrapper is the way to go, Why complicate things?

 

[tomliv]

There may be some intricate way of doing this, but why waste time looking for it? If the four objects are the only thing on the row use two columns instead, otherwise, the wrapper is the way to go, Why complicate things?

Understood and I have gone another direction but at the time I was trying to accomplish a certain layout with breakpoints that swap between a stack on narrower widths and switching to the horizontal layout on wider widths while accomplishing certain aspects of the layout that a wrapper would interfere with.

I thought of going with something involving floats but was trying not to do that.