Scrollbar nie działa

Question

<button class="modal-btn">
                        <i class="icon-cog-outline"></i>
                    </button>

                    <div class="modal-bg">
                        <div class="modal" style="height: 462px">
                            <div class="close-section">
                                <span class="modal-close">
                                    <i class="icon-cancel"></i>
                                </span>
                            </div>
                            
                            <div id="renderer-section" class="sections">
                                    <div class="header">
                                        <span class="header-ins">Renderer</span>
                                    </div>
                            </div>

                            <div id="game-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">game</span>
                                </div>
                            </div>

                            <div id="cells-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">Cells</span>
                                </div>
                            </div>

                            <div id="hud-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">HUD</span>
                                </div>
                            </div>

                        </div>
                    </div>

.modal-btn {
  border: none;
  border-top-left-radius: 3px;
  background-color: #0f0f0f;
  width: 55px;
  height: 35px;
  outline: none;
  cursor: pointer;
  color: rgb(180, 180, 180);
  transform: translate(0%, -1070%);
}

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s;
}

.bg-active {
  visibility: visible;
  opacity: 1;
}

.modal {
  background-color: #141414;
  width: 340px;
  height: 462px;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate(6%, -6%);
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  font-weight: bold ;
  cursor: pointer;
}

.close-section {
  width: 340px;
  height: 35px;
  background-color: #080808;
}

.sections {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  border: 2px solid #080808;
  border-radius: 10px;
  width: 318px;
}

#renderer-section {
  height: 200px;
}

#game-section {
  height: 300px;
}

#cells-section {
  height: 300px;
}

#hud-section {
  height: 300px;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 320px;
  height: 40px;
  margin-top: -1px;
  background-color: #080808;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

Zamiast pojawienia się scrollbara divy się zmienjszają

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Comments

Nie działa :/

---

overflow-y: auto;