Flexbox behaves differently when children have overflow

Question

If the container is flex and item2 has overlow, the container is rendered to the desired size and the overflow bar is visible.

    .Flex_container {
      width: 300px;
      height: 100px;
      display: flex;
      flex-direction: column;
    }

   .item1 {
     color: white;
     background-color: black;
   }

   .item2 {
     color: white;
     background-color: brown;
     overflow: auto;
   }

     <div class="Flex_container">
       <div class="item1">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
        </div>
        <div class="item2">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
        </div>
     </div>

But when I don't apply flexbox, overflow doesn't seem to work. The container seems to adapt more to the content. I want to know why. I'm just about to learn CSS. And I can't get the question out of my head.

    .container {
      width: 300px;
      height: 100px;
    }

   .item1 {
     color: white;
     background-color: black;
   }

   .item2 {
      color: white;
     background-color: brown;
     overflow: auto;
   }

     <div class="container">
       <div class="item1">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
        </div>
        <div class="item2">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
        </div>
     </div>

flexbox introduce the concept of shrinking which doesn't exist with block element. This is the difference — Temani Afif, Jul 15 '22 at 09:22

score 0 · Accepted Answer · answered Jul 15 '22 at 07:14

0

The container has not adapted to the content. It remains at the height you have given it.

But the heights of the children have not been constrained so they get larger to accommodate their content, and as their parent hasn't got overflow-y set as hidden they can be seen.

Here's an illustration where the two children have slightly transparent backgrounds so you can see the background of the parent, and it ends slightly down the second child in this instance.

.container {
  width: 300px;
  height: 100px;
  background: magenta;
}

.item1 {
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
}

.item2 {
  color: white;
  background-color: rgba(0, 0, 255, 0.4);
  overflow: auto;
}

<div class="container">
  <div class="item1">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
  </div>
  <div class="item2">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua. At vero eos et at.</p>
  </div>
</div>

answered Jul 15 '22 at 07:14

A Haworth

30,908
4
11
14

oh, thanks that brings me a lot closer. The illustration was very helpful. But what I still don't quite understand is if the container is flex you can set the overflow by the children themselves, it doesn't seem to work the other way around. – paronym Jul 15 '22 at 08:39
I'm not sure what you mean by 'you can set the overflow by the children themselves'. In your first example you haven't told flex what heights the individual children are to have. But you have told the second item what to do on overflow. – A Haworth Jul 15 '22 at 08:49
maybe i'm just too stupid. In the first example, the container is a flexbox, in the second example it is just a container and I noticed that the children behave differently with a flexbox container and a simple container and I would like to know why. For example, in the second example, which only has a simple container, the overflow effect on its children seems to have no effect, not scrollable. Maybe I'm just explaining it not well enough. sorry, english is not my mother tongue. – paronym Jul 15 '22 at 09:12
An element wont be scrollable if it hasn't got a height. – A Haworth Jul 15 '22 at 09:26
But the first example with the flex container, its second child has no height but a scrollable element. I just got a suggestion, maybe it has something to do with the flex-shrink. You have already helped me a lot. Many Thanks. – paronym Jul 15 '22 at 10:14
flex is giving height I believe. – A Haworth Jul 15 '22 at 11:03

Flexbox behaves differently when children have overflow

1 Answers1