1

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

enter image description here enter image description here

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/

gaurav5430
  • 12,934
  • 6
  • 54
  • 111
  • Are you referring vertical scrollbar or horizontal scrollbar ? – RS17 Jul 06 '19 at 15:10
  • vertical scrollbar – gaurav5430 Jul 06 '19 at 15:15
  • what browser? i don't see this on chrome – Temani Afif Jul 06 '19 at 15:21
  • @TemaniAfif i missed one property, edited the question, please check now – gaurav5430 Jul 06 '19 at 15:21
  • @MaximeLaunois I have added it to the grand-parent now, i will possibly attach images for these 2 different behavior – gaurav5430 Jul 06 '19 at 15:25
  • Weird issue... I'm not able to reproduce it myself (the page displays as same as when removing the `flex-direction` property on the `.grand-parent`). – Maxime Launois Jul 06 '19 at 15:35
  • What browser are you testing on, ii have tested on Chrome and Firefox – gaurav5430 Jul 06 '19 at 15:39
  • I tested too on Chrome and Firefox. But according to me, it's rather an issue with the `overflow` property on the `.child` element, and not related to Flexbox at all. – Maxime Launois Jul 06 '19 at 15:42
  • Why do you think so? If I remove display flex from parent it behaves differently, so it seems it has something to do with flex and flex direction – gaurav5430 Jul 06 '19 at 15:58
  • It took me time to find it out, but removing `display: flex` affects elements' heights. While this is unrelated, this happens too when removing `height: 100%` from `.height`... – Maxime Launois Jul 06 '19 at 16:19
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196083/discussion-between-maxime-launois-and-gaurav5430). – Maxime Launois Jul 06 '19 at 18:27
  • you are facing the default size issue of flexbox that we can fix using `overflow:auto` (check the duplicate for more details) – Temani Afif Jul 06 '19 at 19:48
  • @TemaniAfif thanks for the linked answer, but would be great if you or someone could explain the issue with nested flex as touched upon in the linked answer, as that is what I am facing it seems. I get the answer, but I don't really understand why it behaves like so in my case. child always has overflow:auto, so this issue just has to do with parent overflow/min-height, but how is it affecting whether or not the child scrollbar would show – gaurav5430 Jul 07 '19 at 04:52
  • when the parent doesn't have overflow auto it will no more shrink which means that its child too will not shrink since there is enough space in the parent (add border to notice this) so the overflow will happen only on the grand parent. If the parent is able to shrink (you add overflow to it) then it will shrink to fit the grand parent (no overflow there) and its child will also shrink (since you also defined overflow:auto) and at the end the overflow happen inside the child hence the scroll there. – Temani Afif Jul 07 '19 at 08:11

1 Answers1

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.

Maxime Launois
  • 928
  • 6
  • 19