How to obtain a full height nested container inside a flexbox column in Safari

Question

I have a codepen which highlights the issue I'm experiencing:

I have four columns inside a container with display: flex. The columns receive their style from Bootstrap 3. Inside those columns is a nested container which has a background color. I want that nested container to fill the height of the parent (column) container, but it doesn't work in Safari 10.

To get it to fill in the other browsers, I give it the following style

position: relative; height: 100%; background-color: yellow

Works fine in latest FF and Chrome.

Anyone know how to accomplish this?

possible guidance: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Oct 13 '16 at 20:10

score 1 · Accepted Answer · answered Oct 13 '16 at 20:34

Looks like the link from @Michael_B was helpful.

The answer was to add display: flex to the columns as well, and remove the height: 100% declaration from the nested container, which allowed it to fill the height. Then remove the background color from the column, and apply it to the nested container.

How to obtain a full height nested container inside a flexbox column in Safari

1 Answers1