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;}"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>