What is your dream?

What do you do?

That's right: You

This is about you, your goals, your passions.

Figure that out and we'll help you take it to the world, shouting it from the rooftops. We create the websites that enable you to achieve this dream.

Percentage Widths Flexbox Problem

Tuesday, October 19, 2010 09:36 PM

This question is too long to ask on Twitter, so I’ll ask here.

I’m having a problem with CSS3’s new Flexible Box Layout Module (or Flexbox so it isn’t a mouthful). For the most part, I’ve figured out how to use this new layout technique and am loving it. However, I’m running into an issue when I try to specify the children of the box using percentages. Is this even possible? I’ve stripped down my code to the basics. If you have any knowledge of this, I’d really appreciate the help. Here’s the code:

The CSS:

#box {
	display: -moz-box;
	-moz-box-orient: horizontal;
	width: 1000px;
	background-color: #ccc;
#box div {
	margin: 10px;
	padding: 10px;
	width: 20%;
	background-color: cyan;
	border: 1px solid #000;

And the HTML:

<div id="box">

And this is an image of what I’m getting in Firefox 3.6

Maybe using percentages for the children of a box is not allowed, but that seems really silly to me. Am I doing it wrong? Has Firefox not yet implemented flexbox completely (or accurately?)

Thanks for the help!

@TravInSF noted that I hadn’t tested in WebKit browsers. Upon doing so I found that it works as expected. Perhaps this is a Firefox bug / non-implementation.


dpogue said

For the sake of others who stumble here encountering the same problem, it’s a known bug.

See https://bugzilla.mozilla.org/show_bug.cgi?id=529761 for the current status.

On 06/03 at 03:29 AM

Commenting is not available in this channel entry.

Want to work together or maybe just say hello?