Thank you so much for the amazing flexbox feature! I love it! It’s something I always wished for! I can tell you guys put lots of thoughts into this feature! So useful!!! This is definitely one of the game changing features! YOU ARE AMAZING!
I wish there is a way to make the individual boxes a square (ie, set height equal to width). I understand there might be technical limitations, and css doesn’t have off shelf solution to do that…
A percentage value on top/bottom padding or margins is relative to the width of the containing block
A percentage value on height is relative to the height of the containing block (same for min/max height)
a Percentage value on top and bottom values for a positioned element is relative to the height of the containing block (hat tip to Hashem Qolami for the reminder)
Percentage values are not allowed on border widths (not even left and right)
I tried this method, and does not seem to work for me… maybe I missed something.
I set the div css as you suggested, gave it a background colour and the div does not show up at all in the browser.
When I add content to the box, Webflow designer and chrome only render the content height, not the percentage height I set on bottom margin.
My concern would not be ‘is vw or vh supported well enough in browsers’ but ‘is flex box well enough supported in browsers’.
IE unfortunately is used fairly wide spreaded, also where I live (in the Netherlands), I’ve seen figures of 24% to date. I’ve used flex box on my new site (www.reclamers.nl) for some parts, and from what I’ve seen in emulators of IE 11, it doesn’t look good…
Now that Flexbox is here I have set a new virtual machine with windos and a previous version of IE. I’m not wondering if FB is supported, but rather how well my design degrades when there is no support. I make sure the site is still readable, makes sense.
Most of the time the layout break a little but it’s still very ok.
Just wanted to thank you again. I checked my code today and figured out what’s broken.
Your solution worked!!!
This is exactly what I was looking for. Thanks!
That’s exactly what it’s for. VH means “in percentage of the browser height”.
If you want to dimension an element depending on its container, use %. but the container must have known dimensions, like height or width set, or it doesn’t work
Vw and vh can be helpful but it certain isn’t a solution to everything but it can overcome some problems when we don’t have enough possible breakpoints for example with some heading types.
@vincent aren’t percentages always based on the width of its parent container?
