How To Vertically Wrap Content With Flexbox?

I have three divs inside a flexbox container. I would like the three divs to be displayed as follows: +-----------------------------------------------+ | +-----------------+---

Solution 1:

When you create a flex container, an initial setting is align-content: stretch.

This causes multiple lines of flex items to distribute themselves across the full length of the container.

Override this setting with align-content: flex-start on #container.

---

To make the #container shrink-wrap its contents vertically, you need to remove this rule:

#container { bottom: 0; }

Because #container is absolutely positioned, and there is no parent element that is positioned, which would establish the containing block for #container, the default containing block becomes the initial containing block or, the viewport.

That's why the container is stretching from top to bottom, as illustrated by the black border you applied. Once your remove bottom: 0 the container will act more like height: auto.

Learn more about CSS positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position