Grow your CSS skills. Land your dream job.

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.

*May or may not contain any actual "CSS" or "Tricks".