Chrome Flexbox Hacks: Controlling the Size of Nested Items

Question

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario:

<div style="display:flex; flex-direction:column; height:100vh;">
  <div style="height:60px;">Static header</div>
  <div style="flex: 1 1 0; overflow:hidden;">
     <div style="overflow:auto; height:100%;" id="problem-is-here">
       Lots and lots of content, way too much to fit in the viewport
     </div>
  </div>
</div>

In Firefox and IE11, the innermost element with id="problem-is-here" adjusts its height to match that of its parent due to height:100%, resulting in a vertical scrollbar when content overflows. This behavior is what I desire.

However, in Chrome, the innermost element expands to accommodate all content regardless of its parent's height, causing the excess content to be inaccessible without a visible scrollbar. How can I make Chrome render this element with a maximum height equal to its parent, especially when the parent's height is determined by a flexbox rather than a specific CSS height value?

Various suggestions like setting min-height:0 or ensuring flex-basis is set to

0</code have been attempted but did not yield the desired outcome. View the issue demonstrated here: </p>

<p><a href="http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview" rel="nofollow">http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview</a></p>

<p>This problem revolves around limiting the height of the <code>div

with ID heres-the-problem to that of its parent.

html css google-chrome flexbox

Answer 1

Answer №1

Let's start by delving into the terminology:

...how can I ensure that an element nested within a flexbox member (by "member of a flexbox," I am referring to a child of an element styled with display:flex) limits its size to match the size of the flexbox member it resides under?

A flex container, technically known as a flex container, or colloquially referred to as a flex parent, is an element with the display: flex property.

The children of a flex container are identified as flex items. It is important to note the term children in this context regarding first-level elements. Descendants beyond the initial children do not fall under the category of flex items, and most flex-related properties do not apply to them.

Now, to address your query:

The issue arises due to Firefox (and possibly IE11) interpreting the percentage height rule differently than Chrome.

In essence, the vertical scrollbar you desire isn't appearing in Chrome because the utilization of percentage heights deviates from the conventional implementation specified here.

CSS height property

percentage
Indicates a percentage height value calculated relative to the height of the generated box's containing block. If the height of the containing block is not explicitly defined and the element isn't absolutely positioned, the value computes as "auto".

auto
The height adjusts based on other property values.

To clarify, when assigning a percentage height to an element, it is imperative to specify a height for the containing block (i.e., the parent).

In your code structure, body at level 1 has a height: 100vh declaration.

One level below, .max-flex at level 2 features height: 100%.

Four levels deep, .large-nested-div at level 4 also utilizes height: 100%.

However, at .variable-flex-content at level 3, there is no explicit height property set. Essentially, defining the height using flex: 1 1 0 leaves a missing link in the hierarchy according to Chrome, leading to a violation of the specification. Chrome expects to encounter the height property, and its absence results in an automatic computation of the height as auto.

Chrome vs. Firefox (IE11 not included in this comparison)

In traditional scenarios involving calculating percentage heights, browsers have typically adhered to interpreting the term "height" in the spec as representative of the height property value specifically. Although it could theoretically represent a generic height parameter, the requirement of the height property has become the prevalent interpretation standard. Instances of min-height or max-height affecting a parent element with regards to percentage heights were uncommon in practice.

Recently, as exemplified in this inquiry and in responses to other threads and related discussions, Firefox has broadened its perception to accommodate flex heights as well.

The degree to which each browser complies with standards remains ambiguous.

This ambiguity is exacerbated by the fact that the definition of the height property hasn't been revised since 1998 (CSS2).

The Proposed Solution

Instead of employing flex: 1 1 0% to define the height of .variable-flex-content, consider utilizing height: 100%, height: calc(100% - 60px), or exploring absolute positioning as alternatives.

Answer 2