Philip Renich

Websites

• Home
• Portfolio
• About
• Archives

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">
	<div>one</div>
	<div>two</div>
	<div>three</div>
</div>

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!

Update:
@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.