This is a very contrived example to distill the problem I'm observing. I know I can work around it, but I still want to understand why this doesn't work the way I expect it to. I'd basically like to know: Is it a bug? Or is it behaving as it's designed? If so, what are the specs?
Problem summary: Percentage height or max-height is undesirably ignored on an element that is nested within 2 (maybe more) flex boxes that are flex-direction: row, and align-items is anything but the default stretch (flex-end in the example).
Setup
The design has category boxes laid out in a row, each with item boxes, also laid out in rows. I want each category and item to size to its contents, limit its height to its parent, and align to the bottom. If there is overflow, I want the item to scroll its contents.
Here's a Fiddle: https://jsfiddle.net/72Lf6nas/
HTML:
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><link rel="stylesheet" href="src/style.css" /></head><body><div class="container"><div class="category"><div class="item"><h2>Item 1</h2><p>Small content in section 1</p></div></div><div class="category"><div class="item"><h2>Item 2</h2><p>Large content in section 2. This section should scroll.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices mi sit amet laoreet pulvinar. Nam vel pulvinar ligula, sit amet dictum ligula. Maecenas tincidunt, dui vel sollicitudin euismod, purus ipsum tincidunt mauris, nec tincidunt dolor odio at turpis. Aenean non lacus ac purus rhoncus ultrices. Fusce ultrices iaculis tellus, et venenatis neque ullamcorper tincidunt. Curabitur non urna vitae odio hendrerit sagittis. Ut vitae accumsan arcu.</p></div><div class="item"><h2>Item 3</h2> Small content in section 2.</div></div></div></body></html>CSS:
* { box-sizing: border-box;}html,body { margin: 0; padding: 0;}body { height: 100vh;}.container { height: 100%; display: flex; /* Comment this out here or in .category to make .item's max-height work. */ align-items: flex-end; overflow: hidden; gap: 5px; padding: 5px; border: 3px solid red;}.category { display: flex; flex: 1; /* Comment this out here or in .container to make .item's max-height work. */ align-items: flex-end; max-height: 100%; overflow: hidden; border: 3px solid green; gap: 5px; padding: 5px;}.item { position: relative; width: 200px; /* PROBLEM: Not honored when both .container and .category have align-item specified */ max-height: 100%; overflow-y: auto; border: 3px solid blue; padding: 10px;}What I expect:Screenshot - Item box that would overflow scrolls instead
What happens:Screenshot - item max-height not obeyed, and overflowed item contents don't scroll
(Sorry, I'm new, not allowed to embed images yet!)
Observations
The item box does not obey max-height: 100% and overflows, despite its parent category displaying obvious boundaries and implying presence of reference height. Setting item's height to a percentage value also does nothing, but it does respond if either height or max-height being set to a pixel value. Responding to absolute values implying only percentage value is ignored.
I thought maybe flex-end was somehow removing the height reference needed to calculate relative height, but keeping align-items: flex-end on the direct ancestor of item (category) while removing it from container will make it heed item's max-height correctly. It only borks when item's parent and grandparent both have align-items: flex-end specified. Even so, there should still be a derived reference height starting from body's 100vh, so it's a surprise that the double-nesting would cause this behavior.
Appreciate any help in understanding this!