1

Can someone please help explain why adding overflow: hidden makes a div disappear. Codesandbox example

.wrapper {
  height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid tea;
  overflow: scroll;
}

.red {
  background-color: red;
  height: 100px;
  /* why the following declaration makes red black disapper */
  overflow: hidden;
}

.green {
  background-color: green;
  height: 400px;
  flex-shrink: 0;
}
<div class='wrapper'>
  <div class='red'>red</div>
  <div class='green'>green</div>
</div>

As far as I can see, the red block should always has 100px and a scrollbar should appear in the wrapper block as (100px from red block + 400px from green block > 300px from wrapper block)

user3807523
  • 11
  • 2
  • You have given the green div a greater height than it's parent div. Reducing it's height to, let's say 200px, will make the red box show again. –  Sep 25 '20 at 13:17
  • Yep, I know reducing the height of green div will make the red box appear. What confused me is the fact that adding `overflow: hidden` will make the red box disappear. It appears that the green box eats up the space that should belong to the red box – user3807523 Sep 25 '20 at 15:03

0 Answers0