Re: css3-flexbox

On Mon, Jun 28, 2010 at 5:58 AM, Ashley Streb <astreb@brightcove.com> wrote:
> 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 for the feedback, Ashley!

This is why I want flexbox to handle overflow in this manner -
display:table's magical never-overflow-ever behavior is too magical.

~TJ

Received on Wednesday, 30 June 2010 14:50:41 UTC