css3-flexbox

Howdy --

I wanted to pass along a specific use-case that I had been hoping the
flexible box layout spec would cover in case it helps provide fodder for
further discussion.

Use Case: We're trying to build an application UI as a web-app that has
three main columns.  The first column is inflexible with the two remaining
columns equally sharing the remaining space.  We would like the two flex
columns to always be equally sized.  The app would dynamically flex to meet
changing browser window sizes.  This is a pretty common interface for us
that we have built in several other UI languages.

Problem: We're running into problems when a child element of the box would
overflow and thus causes the box to grow.  (I.e., one of the flex columns
has multiple img tags which is to represent a slideshow.  We don't want all
the img tags to be visible but instead would like it to appear as a sliding
div with the overflow hidden).  We're not able to keep our two columns the
same size.  I recognize this is behavior specified in the spec. But we were
looking/hoping for a way to state that a child element of the a box should
not grow beyond a particular size and *should* overflow thus enabling us to
use the flexible box layout specification for this use case.  E.g., by
specifying a max-width on the child element, this could be used to determine
the intrinsic size of the child elements of the box.

I'm attaching an example HTML file which demonstrates (a simplified use
case) of what we are trying to achieve.

While we can solve this through a combination of JS/CSS, it would be great
to achieve this type of interface using exclusively CSS.

Thanks!

-ashley

Received on Wednesday, 30 June 2010 10:07:37 UTC