CSS Flex align-content property doesn't work with inline height declaration

Question

CSS Flex property align-content doesn't work in container with inline height declaration. It works fine as soon as I move the inline height to the separate CSS file class. Why is that? Chrome and Opera behaves the same. The items should move vertically but stay at the top of the container. Is my inline declaration a wrong CSS? Code attached.

.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

Do you mean something like this: http://jsfiddle.net/mpq0vwt1/1/ — justDan, Nov 03 '17 at 17:36
`align-content` doesn't do anything in this scenario. It can only have an effect in multi-line containers. In your image, there's only a single line. https://stackoverflow.com/q/42613359/3597276 — Michael Benjamin, Nov 03 '17 at 19:14
Even if I make the children wider and cause them wrap into two lines, it doesn't affect. — RP McMurphy, Nov 03 '17 at 19:42

Asons · Accepted Answer · 2017-11-05T10:04:45.090

The align-content works just fine with inline styles, the issue with your code sample is that, as the father's height is not set, it is based on its content, hence it render at the top of the outer div.

Add height: 100%; to .father and you'll get another (I assume expected) result.

Stack snippet

.father {
  height: 100%;              /*  added  */  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

Another option is to make the outer div a flex row container, which then will make father also a flex row item, and as such it will, by default, stretch, as align-items has that as its default value.

Stack snippet

.father {
  flex-grow: 1;              /*  needed to take full width being a flex row item  */
  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="display: flex; width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

It does and it doesn't. If I remove the wrapper div you added around father, the align-content: flex-end/center has no effect but when I increase the padding so the the items get larger and wraps into a second line, align-content starts working. Any idea why? How do i vertically center items of a parent if they are not multi-line? — RP McMurphy, Nov 05 '17 at 00:05
@RPMcMurphy I haven't added any wrapper? .. am using the code you posted. `align-items: center` vertically center flex row items, and they will be centered in the flex container (`father`), and if that doesn't have any height, which your doesn't, it will collapse to the highest child and the smaller will be centered within it. — Asons, Nov 05 '17 at 09:56
My bad. Now it works. Align-content is a multi-line property. Got it. Align-items is a single-line one. https://codepen.io/rpmcmurphy/pen/EbyYML Works fine now. — RP McMurphy, Nov 05 '17 at 15:18
@RPMcMurphy That is correct, still, won't affect anything until the parent (`father`) has a height, as you now have in your codepen. Was my help useful so I get my answer accepted? — Asons, Nov 05 '17 at 15:30

score -2 · Answer 2 · answered Nov 03 '17 at 17:38

##Add span to bg-5 and change some css


.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
  display:table;
}

.bx-5 span{
 display: table-cell;
 overflow: hidden;
 vertical-align: middle;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;"><span>Bella</span></div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

You should wrap your text with span. after that your parent div should be display:table and span diplay:table-cell and vertical-allign:middle. — Omar, Nov 03 '17 at 18:21
I don't want to use display table, flex should just work here. — RP McMurphy, Nov 03 '17 at 19:42

CSS Flex align-content property doesn't work with inline height declaration

2 Answers2