Padding makes div bigger even though it has box-sizing: border-box;

April 5, 2022

I am trying to make an faq page with collapsible divs. I am trying to add padding to the content that will appear when you open the collapsible div. However, the padding makes the content div show even though max-height is set to 0 and I have box-sizing set to border-box.

There was another StackOverflow page about this. The solution suggests that I use display-block. However, that didn’t work for me.

Here is the css:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400&display=swap');

.container {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin: 20px 200px;
}

.question {
  cursor: pointer;
  padding: 20px;
}

.question h1 {
  font-family: "Inter", sans-serif;
  font-size: 32px;
}

.content {
  padding: 20px;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  transition: all .2s cubic-bezier(0,1,0,1);
}

.content.show {
  padding: 20px;
  max-height: 100px;
  transition: all .2s cubic-bezier(1,0,1,0);
}

Here is the jsx:

import React from "react";
import classes from "./Accordion.module.css";
import { useState } from "react";

function Accordion(props) {
  const [selected, setSelected] = useState(null);

  const toggle = (i) => {
    if (selected === i) {
      return setSelected(null)
    }

    setSelected(i)
  }

  return (
    <div className={classes.container}>
      <div className={classes.question} onClick= {() => toggle(props.index)}>
        <h1>{props.faq.question}</h1>
      </div>
      <div className={selected === props.index ? `${classes.content} ${classes.show}` : classes.content}>
        <p>{props.faq.answer}</p>
      </div>
      
    </div>
  );
}

export default Accordion;