0

I have following simple code:

<div id="hidable" class="grid-wrapper">
  <div class="grid-wrapper-inner">
    <div class="content">
      Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla Lorem ipsum bla bla bla 
    </div>
  </div>
</div>
<button>
  Toggle
</button>

Css:

.grid-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  width: max-content;
  transition: grid-template-rows 300ms;
  border: 1px solid black;
  
  &-inner {
    overflow: hidden;
  }
  
  &-hidden {
    grid-template-rows: 0fr;
  }
}

.content {
  width: 200px;
  border: 1px solid red;
}

And with javascript I'm adding or removing .grid-wrapper-hidden class on most top html element. It works - transition smoothly works from 0 height to full element height. What I don't understand in this piece of code, why is second div with class .grid-wrapper-inner with overflow set to hidden needed, even if I set overflow hidden to most outer element. Without it, it won't work. Any explanation would be greatly appreciated. JS Fiddle link

Edit: To anyone who close my question: how does linked SO thread answers my problem? After removing nested div with overflow hidden and adding overflow: hidden with min-height: 0 to most outer element, it still does not work. I can't see connection.

Furman
  • 2,017
  • 3
  • 25
  • 43
  • Edited my question: I can't see how linked SO threads answers this – Furman Jul 21 '23 at 22:52
  • 1
    the duplicate explains why overflow:hidden is needed to work. Why are you removing it and adding it somehwere else? it needs to be in inner and if you remove it doesn't work because "By default, a grid item cannot be smaller than the size of its content." (the first sentence from the duplicate) – Temani Afif Jul 21 '23 at 23:13

0 Answers0