Display: flex interfers with .hidden class > collapsible div is visible even though it shouldn't

I have a main page and on this page there is "Add question" button, and if clicked the expected behaviour should be that a collapsible div will appear on the top of the page and also an overlay layer between the div and the main page. Unfortunately there seems to be a bug with the .hidden class (display:none) and the display: flex, they seem to interfere and I don't know how to fix this. The only fix that worked so far is this:

.hidden {
  display: none !important;
}

but i heard it's a very bad practise to use !important, because it means that something is messed up already somewhere else. So I am trying to find a better solution. Full code:

"use strict";
const btnTopbarAdd = document.querySelector(".btn-topbar-add");
const topbarNav = document.querySelector(".topbar-nav");
const collapsibleDivAddQA = document.querySelector(".add-question-collapsible");
const containerAskFilter = document.querySelector(".container-ask-filter");
const overlay = document.querySelector(".overlay-js");

btnTopbarAdd.addEventListener("click", () => {
  topbarNav.classList.add("hidden");
  collapsibleDivAddQA.classList.remove("hidden");
  // containerAskFilter.classList.add("hidden");
  overlay.classList.remove("hidden");
});

overlay.addEventListener("click", () => {
  overlay.classList.add("hidden");
  collapsibleDivAddQA.classList.add("hidden");
  topbarNav.classList.remove("hidden");
});

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

body {
  all: initial;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none;
}

#add-question-collapsible-style {
  position: fixed;
  /* left: 0; */
  top: 0;
  /* transform: translate(-50%, -50%); */
  /* left: 50%;
  transform: translateX(-50%); */
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  background-color: #000000b9;
  border-bottom: 0.1rem solid #000;
  padding: 2rem;
}

.topbar-ux {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin-top: -1rem;
}

.btns-topbar {
  background-color: #fff;
  border-color: rgb(220, 59, 190);
  font-size: 0.95rem;
  /* font-weight: bold; */
  border-width: 0.01rem;
  border-radius: 3rem;
  width: 4.4rem;
  height: 4.4rem;
  cursor: pointer;
  border-style: solid;
}

/* .br-topbar-btns {
  font-size: 1rem;
} */
#btn-topbar-add-style {
  color: rgb(100, 199, 199);
}
#btn-topbar-all-style {
  color: rgb(92, 214, 55);
}

.container-ask-filter {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#ask-btn {
  width: 7rem;
  height: 3.2rem;
  border-radius: 1.2rem;
  border-width: 0.09rem;
  background-color: #fff;
  cursor: pointer;
  border-style: solid;
}
/* 
#container-checkbox-style {
  margin-left: 2rem;
} */

.container-question-answer {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#question-style {
  max-width: 60%;
  margin: 0 auto;
}

.textarea {
  resize: none;
  field-sizing: content;
  font-size: 1.2rem;
}

.textarea-sizing {
  font-size: 1.2rem;
  min-width: 25rem;
  max-width: 45rem; /* optional: a minimum width, otherwise textarea can become very small with no content */
  max-height: 15lh; /* optional: after 10 lines, give a scrollbar */
}

#textarea-answer-style {
  border-color: rgb(65, 182, 182);
}

#textarea-margin-main {
  margin-top: 2.7rem;
}

#check-btn {
  width: 8rem;
  height: 3.7rem;
  border-radius: 0.5rem;
  /* border-width: 0.09rem; */
  border: none;
  font-weight: bold;
  /* border-style: solid; */

  color: rgb(181, 142, 172);
  background-color: #e7d2e4;
  cursor: pointer;
}

#check-btn-container-margin {
  margin-top: 2rem;
}

.style {
  z-index: 1;
  position: absolute;
  top: 6rem;
}

/* #style-seperation-bar {
  position: absolute;
  bottom: 0;
  height: 0.1rem;
  width: 100%;
  background-color: #000;
} */

#overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
#container-textarea-collapsible {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#textarea-input-question-style {
  width: 35rem;
  max-height: 6lh;
}
#textarea-input-answer-style {
  width: 40rem;
  max-height: 8lh;
}

.label-container-collapsible {
  color: #919191;
}
#btn-collapsible-add {
  width: 9rem;
  height: 4rem;
  cursor: pointer;
  background-color: #000000d3;
  color: #656565;
  border: none;
  font-size: 1.4rem;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="uxbeta.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <div class="topbar-nav topbar-ux">
        <button class="btns-topbar btn-topbar-add" id="btn-topbar-add-style">
          ADD <br />
          question
        </button>
        <button class="btns-topbar" id="btn-topbar-all-style">
          ALL <br />
          question
        </button>
      </div>
      <div
        class="add-question-collapsible hidden"
        id="add-question-collapsible-style"
      >
        <div id="container-textarea-collapsible">
          <textarea
            class="textarea"
            id="textarea-input-question-style"
            placeholder="Question"
            spellcheck="false"
          ></textarea>
          <textarea
            class="textarea"
            id="textarea-input-answer-style"
            placeholder="Answer"
            spellcheck="false"
          ></textarea>
        </div>
        <div>
             
        <select>
          <option value="0">Select categories</option>
          <option value="1">Math</option>
          <option value="2">Physics</option>
          <option value="3">Art's</option>
        </select>

        <label class="label-container-collapsible">
          <input type="checkbox" checked="checked" />All
        </label>

        <label class="label-container-collapsible">
          <input type="checkbox" />Easy
        </label>

        <label class="label-container-collapsible">
          <input type="checkbox" />Medium
        </label>

        <label class="label-container-collapsible">
          <input type="checkbox" />Hard
        </label>
        </div>

     
        <div>
          <button id="btn-collapsible-add">ADD</button>
        </div>
      </div>
  
        
        <!-- <div id="style-seperation-bar"></div> -->
      </div>
    </section>
    <div class="style">
      <section>
        <div class="container-ask-filter">
          <button id="ask-btn">ASK</button>
          <label class="container-checkbox" id="container-checkbox-style">
            <input type="checkbox" />
            Repeat?</label
          >
          <select>
            <option value="0">Select categories</option>
            <option value="1">Math</option>
            <option value="2">Physics</option>
            <option value="3">Art's</option>
          </select>

          <label class="label-container-ask-filter">
            <input type="checkbox" checked="checked" />All
          </label>

          <label class="label-container-ask-filter">
            <input type="checkbox" />Easy
          </label>

          <label class="label-container-ask-filter">
            <input type="checkbox" />Medium
          </label>

          <label class="label-container-ask-filter">
            <input type="checkbox" />Hard
          </label>
        </div>
     
      </section>
      <section class="container-question-answer">
        <div>
          <p id="question-style">
            Wie heisst das Enzym welches die Synthese eines kurzen
            komplementären RNA-Stückes als Startmolekül durchführt? Wie heisst
            das Enzym welches die Synthese eines kurzen komplementären
            RNA-Stückes als Startmolekül durchführt?
          </p>
        </div>
        <div id="textarea-margin-main">
          <textarea
            class="textarea-sizing textarea"
            id="textarea-answer-style"
            placeholder="Answer here"
            spellcheck="false"
          ></textarea>
        </div>
        <div id="check-btn-container-margin">
          <button id="check-btn">Check</button>
        </div>
      </section>
    </div>
    <div id="overlay" class="hidden overlay-js"></div>

    <script src="script.js"></script>
  </body>
</html>

Solution

I found that applying the style using the class selector instead of the ID selector works for my case. Don't forget to move the .hidden styles below it also.

replace:

#add-question-collapsible-style {
  position: fixed;
  /* left: 0; */
  top: 0;
  /* transform: translate(-50%, -50%); */
  /* left: 50%;
  transform: translateX(-50%); */
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  background-color: #000000b9;
  border-bottom: 0.1rem solid #000;
  padding: 2rem;
}

with:

.add-question-collapsible {
  position: fixed;
  /* left: 0; */
  top: 0;
  /* transform: translate(-50%, -50%); */
  /* left: 50%;
  transform: translateX(-50%); */
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  background-color: #000000b9;
  border-bottom: 0.1rem solid #000;
  padding: 2rem;
}

and moving the hidden style below it:

.hidden {
  display: none;
}