height: 0; overflow: hidden; not working with padding

Question

I have this piece of code, my goal is to make custom select with smooth animation. I've chosen to make my height by default 0 with overflow: hidden, and set height to auto when .active is added. But ran into problem that body is still shown. Problem seems to be with paddings

.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 35px 0 20px;
  background-color: #D6E7D2;
  cursor: pointer;
  transition: background 0.5s;
}

.select-body {
  height: 0;
  overflow: hidden;
  padding-top: 27px;
  padding-left: 20px;
  padding-bottom: 31px;
  background-color: #DCE9D9;
  transition: all 0.5s;
}

.select.active .select-body {
  height: auto;
}

.select-item {
  line-height: 35px;
  cursor: pointer;
  color: #499A18;
}

.select-item:not(:last-child) {
  padding-bottom: 12px;
}

<div class="select accordion">
  <div class="select-header">
    <span class="select-current">City</span>
    <div class="select-icon"></div>
  </div>
  <div class="select-body">
    <div class="select-item">Canandaigua, NY</div>
    <div class="select-item">New York City</div>
    <div class="select-item">Yonkers, NY</div>
    <div class="select-item">Sherrill, NY</div>
  </div>
</div>

I've tried putting body in container - didn't work. And to add padding when .active is added - this causes unexpected transition behavior.

Possible duplicate: https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Frank Fajardo, Feb 01 '23 at 23:29
Does this answer your question? [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Frank Fajardo, Feb 01 '23 at 23:30
You can user this code: .select-body:hover { height: auto; overflow: auto; } It will work once you hover the mouse over — Tladi Ramahata, Feb 01 '23 at 23:32
You need to add whatever adds that `.active` class to the code to reproduce this here. — Mark Schultheiss, Feb 01 '23 at 23:37
@MarkSchultheiss .select.active .select-body { height: auto; }. It's in the code. — stf0x9, Feb 01 '23 at 23:53
Just do the same with top & bottom padding, as you do with height. — Arleigh Hix, Feb 01 '23 at 23:57
@ArleighHix If I put my paddings in .select.active .select-body then my transition is not smooth. It first adds paddings and adds transition to it, then height is calculated. — stf0x9, Feb 02 '23 at 00:03
I did/do see that CSS but not how that class gets applied to anything here to reproduce the actual challenge. — Mark Schultheiss, Feb 02 '23 at 13:59
That certainly is a lot of padding there also. I would suggest you use `em` for padding like `1.5em` or even use `rem` similar to `1.5rem;` which should give you a `24px` pad given most browsers default to `1rem` = `16px` — Mark Schultheiss, Feb 02 '23 at 14:05

score 0 · Accepted Answer · answered Feb 02 '23 at 00:50

The real problem here is that you cannot animate from height: 0; (size value) to height: auto; (keyword value), they must both be size values. You would need to know the exact expanded height. What you can do is animate the max-height from 0 to some really big size that should always be larger than the contents; in my example I use 200vh (twice the viewport height).
Also, just apply and remove the padding the same as you do with height.

const toggle = document.querySelector('.select-header')
toggle.addEventListener('click', () => toggle.parentElement.classList.toggle('active'))

.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 35px 0 20px;
  background-color: #D6E7D2;
  cursor: pointer;
  transition: background 0.5s;
}

.select-body {
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-left: 20px;
  padding-bottom: 0;
  background-color: #DCE9D9;
  transition: all 0.5s;
}

.select.active .select-body {
  max-height: 200vh;
  padding-top: 27px;
  padding-bottom: 31px;
}

.select-item {
  line-height: 35px;
  cursor: pointer;
  color: #499A18;
}

.select-item:not(:last-child) {
  padding-bottom: 12px;
}

<div class="select accordion">
  <div class="select-header">
    <span class="select-current">City</span>
    <div class="select-icon"></div>
  </div>
  <div class="select-body">
    <div class="select-item">Canandaigua, NY</div>
    <div class="select-item">New York City</div>
    <div class="select-item">Yonkers, NY</div>
    <div class="select-item">Sherrill, NY</div>
  </div>
</div>

height: 0; overflow: hidden; not working with padding

1 Answers1