flex and overflow : weird behaviour [duplicate] - html

Question

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
EDIT: added flex-direction: column, missed it in the initial code.
When the child has overflow:auto and the parent has overflow:auto, the scrollbars appear on the child.
But when overflow:auto is removed from the parent, the scrollbars appear on the grand-parent .
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: "Roboto", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.App {
display: flex;
height: 100%;
}
.grand-parent {
display: flex;
flex-direction: column;
background: red;
overflow: auto;
padding: 20px;
}
.parent {
display: flex;
overflow: auto;
padding: 20px;
background: green;
}
.child {
overflow: auto;
font-size: 156px;
}
<div class="App">
<div class="grand-parent">
<div class="parent">
<div class="child">
Some content which grows bigger
</div>
</div>
</div>
</div>
Why is that? I would still expect the scrollbars to appear on the child.
How is the browser layout algorithm working here?
EDIT:
weirdly enough, the behavior seems to depend on the grand-parent having flex-direction: column. It works as I expect when flex-direction: row
tested on Chrome 75, firefox 67
This seems to have something to do with flex-direction on the grand-parent, if flex-direction is row, the horizontal scroll shows this behavior, if flex-direction is column, the vertical scroll shows this behavior
EDIT:
On further experiment, If we set min-height: 0 on parent, it behaves as expected, so this issue might be similar to
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
https://css-tricks.com/flexbox-truncated-text/

Answer 1

For overflow-y, the CSS property which controls how content overflows parent vertical edges, the default value is visible. Here is how it works:
Content is not clipped and may be rendered outside the padding box's top and bottom edges.
This means that if the content doesn't fit in the box, some content will be rendered outside the box.
This property is not inherited, however. The CSS below will not set the overflow property to auto on children of div with ID parent:
var parentElem = document.getElementById('parent');
var childElem = document.getElementById('child');
console.log('overflow-y property of parent element: ' + window.getComputedStyle(parentElem).overflowY)
console.log('overflow-y property of child element: ' + window.getComputedStyle(childElem).overflowY)
#parent {
overflow: auto;
}
<div id="parent">
<div id="child">
Some content
</div>
</div>
This means that when content overflows in children boxes, scrollbars are automatically displayed by browsers on parent boxes; you will have to specify explicitly the property on children nodes as needed.