[Webkit-unassigned] [Bug 137730] 100% height doesn't work within a flex item in a flexbox

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=137730

--- Comment #1 from Adam Comella <rigdern at gmail.com> ---
Details about the impact of this bug.

I consider this to be a bad flexbox bug which makes flexbox practically unusable when implementing or using reusable UI components (e.g. those from jQuery UI, jQuery Mobile, WinJS). Here are a couple of examples to illustrate.

Scenario 1: An app developer puts a reusable UI component within a flexbox

The app would have some markup that looks like this:
<div class="a-flexbox">
  <div class="a-flex-item">
    <div class="reusable-ui-component">
      <!-- implementation details of ui component -->
    </div>
  </div>
</div>

The UI component will not work correctly if it uses a percentage height (e.g. height: 100%) within its implementation details. To fix this, the app developer needs to dig into the implementation of the UI component and restyle it to not use percentage heights. Other options for the app developer would be to stop using flexbox or to stop using the UI component. None of these options are good solutions.

Example of real world repro: Putting a WinJS ListView (a reusable UI component) inside of a flexbox: http://codepen.io/anon/pen/rhzgi

Scenario 2: As part of its implementation details, a reusable UI component puts app content into a flex item. An app developer can't use percentage heights within that content.

The app would have some markup that looks like this:
<div class="a-reusable-ui-component-which-uses-flexbox">
  <div class="reusable-ui-components-flex-item">
    <div class="custom-app-content-which-uses-percentage-height"></div>
  </div>
</div>

The app's content will not size correctly because it uses a percentage height. To fix this, the app developer would have to notice that the UI component puts the app's content into a flex item and then would have to restyle the app content to use flexbox features for sizing (e.g. flex-grow, flex-shrink) instead of percentage heights. Alternatively, the developer could stop using the UI component. Neither solution is good.

Example of real world repro: Attempting to use percentage height in app content which is put inside of a WinJS Hub (a reusable UI component which uses a flexbox as an implementation detail): http://codepen.io/anon/pen/hgauy

==========

My examples were meant to illustrate that this flexbox bug makes it difficult for app developers to make use of reusable UI components (e.g. those provided by libraries like jQuery UI, jQuery Mobile, WinJS). While this flexbox bug exists, app developers are left with a few options:
  1. Dig into the implementation details of reusable UI components so that they can style their app and the component to work well together (everything needs to use flexbox sizing or percentage height sizing -- you can't mix them)
  2. Avoid reusable UI components
  3. App authors and reusable UI component authors avoid flexbox

That's how bad the bug looks from my perspective. I am very interested to hear if I am misunderstanding something or if an easy generic workaround exists.

==========

This repros in Chrome and Safari (chromium bug: https://code.google.com/p/chromium/issues/detail?id=428049).

This works in IE 11 and Firefox 33.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20141028/4b934a68/attachment-0002.html>