Align-content: Flex-end Not Shifting Elements To Container Bottom

I have an outerWrapper, innerWrapper, and children. outerWrapper has a height of 300px, and is display: flex. innerWrapper is also display: flex. I think because they are flex, inn

Solution 1:

please try align-items:flex-end; instead of align-content:flex-end;.

align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value.

The align-items property of flex-box aligns the items inside a flex container vertically just like justify-content does for horizontal axis.

Solution 2:

Instead of, or in addition to, align-content: flex-end, use align-items: flex-end.

The align-content property only works on multi-line flex containers. So, for instance, if your flex items wrap, then align-content would come into play.

In a single line flex container, align-content has no effect. As you mentioned, "... it doesn't work because .innerWrapper inherits .outerWrapper's height". In other words, it doesn't work because the cross size of a single line is the cross size of the container, leaving no extra space.

From the spec:

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property. In a single-line flex container, the cross size of the line is the cross size of the flex container, and align-content has no effect. The main size of a line is always the same as the main size of the flex container’s content box.

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

_{(emphasis added)}