CODEWITHSUNDEEP
htmlcss
Samih
Samih

Reputation: 1088

Nested Flexbox Items Not Expanding to Fill Parent When Scrollable

I have been trying to create the following layout using CSS3 flexboxes but have hit a stumbling block.

The layout has 3 outer rows, with the "header" and "footer" being fixed height. The middle flexes to fill the available space. The middle row must also be scrollable.

Within the flexible middle, there are 3 columns, with the left and right being fixed width and the middle flexing to fill the available space.

See what I have so far here: http://codepen.io/Samih/pen/yCHaI

Everything was going swimmingly, but in all 3 main browsers (chrome, firefox and IE11) scrolling down you will notice that the backgrounds/borders on the 3 columns do not extend to the full height of the parent container. Their height is maxing out at the height of the visible area instead of the full height of the container.

Thanks in advance for your help.

Upvotes: 1

Views: 1811

Answers (1)

Stigma
Stigma

Reputation: 71

section, article {
    align-self: baseline;
}

http://codepen.io/anon/pen/HAJDs

Upvotes: 3

Related Questions