- From: Ashley Streb <astreb@brightcove.com>
- Date: Mon, 28 Jun 2010 08:58:16 -0400
- To: www-style@w3.org
- Message-ID: <AANLkTimRaaxOFvSrWuoRmWs9Ut8N1XVQ4_mVDgbddNDG@mail.gmail.com>
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
Attachments
- text/html attachment: flex-box-example.html
Received on Wednesday, 30 June 2010 10:07:37 UTC