The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Flexbox and vertical stretching/shrinking

  • # April 12, 2013 at 7:12 pm

    So I’m trying to use flexbox to evenly distribute space between elements within a container.

    Let’s say I have a flex container (div element) that has a height of 500px or whatever, and it contains four rows of content inside of it (also div elements).

    I’m using the flex-flow property with values: column nowrap, because I need to distribute the space vertically, am I correct? Now, the flex container resizes on some conditions via javascript, so when that happens I’d like the four content rows to stretch or shrink evenly depending on the new height of the flex container.

    My main concern is the shrinking because the flex container is more likely to reduce its size. I’ve been trying a lot of different approaches, but since I’m no CSS expert everything has failed so far, so any help would be greatly appreciated.

    Thanks in advance.

    # April 16, 2013 at 3:16 pm

    Would you create a CodePen example? I can better help you if you can. :)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed