0

I have prepared the following simple sample

This code does not apply max-height to .b when flex-direction is row, and .b overflows.

However, when the flex-direction is column, the max-height is applied and the .b does not overhang due to the max-height. Why is this?

I tried changing align-items:stretch to a value such as flex-start, but I did not see any change.

<div class="a">
  <div class="b">
  </div>
</div>


.a {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: row; /* or column */
}

.b {
  overflow: auto;
  background: blue;
  flex: 1 1 auto;
  height: 500px;
}

edit

When a large child element is created in .b as shown below, it scrolls without overflowing, regardless of whether flex-direction is specified for row or column.

The difference in behavior looks more and more unnatural, even though it should be doing almost the same thing as the code shown above. Why does it behave this way?

<div class="a">
  <div class="b">
  <div style="height: 500px; background-color: yellow"></div>
  </div>
</div>

.a {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: row; /* or column */
}

.b {
  overflow: auto;
  background: blue;
  flex: 1 1 auto;
}
Uarcin
  • 1
  • 1
  • I don't know why it acts like that, but if you also add min-height: 500px to '.b' when you have the flex-direction as column, it will behave the same as when it is set to row without a min height – coot3 Nov 03 '22 at 03:31
  • the difference is flex-shrink that only strike on column direction. flex-shrink works only on the main axis and there is nothing to shrink on the row direction – Temani Afif Nov 03 '22 at 14:58
  • @TemaniAfif : What do you think about the fact that if `.b` has large child elements(`
    `), a scroll container is generated regardless of the `flex-direction`? If `flex-shrink` is the cause, shouldn't it exhibit the same behavior which apply `height: 500px;` to `.b`?     – Uarcin Nov 03 '22 at 15:16
  • no, the shrink apply to the flex item regardless its content. Its content will not shrink but overflow – Temani Afif Nov 03 '22 at 15:31

1 Answers1

0

overflow is applied to container not child. So that when the child overflows the container maintains its state and apply the overflow property that you have specified in the container.

<div class="a">
  <div class="b">
  </div>
</div>

.a {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: row; /* or column */
  overflow: auto;
}

.b {
  background: blue;
  flex: 1 1 auto;
}

This is hiding the overflow when column and not in row because in column layout the elements have to position with respect to how much height is available. But in row layout they only cares about how much width available and if something overflows you have to deal it within .a.

Mayank Jha
  • 1
  • 1