align-content: flex-end not shifting elements to container bottom

Question

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, innerWrapper inherits outerWrappers height.

I want to add align-content: flex-end to outerWrapper. But it doesn't work, because innerWrapper inherits outerWrappers height.

How can I add align-content: flex-end to outerWrapper?

Or, how can I keep innerContents height the same height as its children, so align-content: flex-end will work?

Here's an image describing what I want:

I want to bring innerContent down to the red line.

Update

I just want to clarify. I want innerWrapper to end at the red line, not start.

JSFiddle

#outerWrapper {
  height: 300px;
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

Hiral Suvagya · Accepted Answer · 2016-06-20T02:31:08.047

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.

edited Jun 20 '16 at 02:31

answered Jun 20 '16 at 02:20

Hiral Suvagya

591
3
8

Oh. Interesting! I'm a bit puzzled by single line though. Does that mean single child, but its grandchild can have as many lines as it wants; will that still be considered single line? Or do all its descendants also have to be single line? – Jessica Jun 20 '16 at 02:37
single line means single row – Hiral Suvagya Jun 20 '16 at 02:37
What about its descendants? i.e. grandchildren – Jessica Jun 20 '16 at 02:38
sorry don't understand what you want to say? – Hiral Suvagya Jun 20 '16 at 02:39
It's a bit confusing. I know. :) Let's take the example in the question. Let's say `innerWrapper` has 5 rows. Does that make `outerWrapper` not single lined? – Jessica Jun 20 '16 at 02:42
still it will work align-items:flex-end will adjust its inner items to the end – Hiral Suvagya Jun 20 '16 at 02:45
@HiralSuvagya, the `justify-content` property doesn't always work on the horizontal axis. It can align vertically, too. It depends on `flex-direction`: http://stackoverflow.com/q/32551291/3597276 – Michael Benjamin Jun 30 '16 at 17:02

Michael Benjamin · Answer 2 · 2016-07-10T23:48:35.677

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)}

align-content: flex-end not shifting elements to container bottom

JSFiddle

2 Answers2

Linked