Overflow hides the content - html

Question

The problem is on the "container main" div, which has the overflow-y. When the <form> height gets increased and the overflow starts to work on the "container div", it's not possible to see the whole form and the top part gets hidden
I don't think it's normal behavior, I've been some hours at this problem and just can't solve it the way I wanted (by leaving the form centered with "container main" flexbox)
.form-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
backdrop-filter: brightness(125%) hue-rotate(180deg) blur(10px);
background-color: rgba(0, 0, 0, .5)
}
body {
background-image: url(https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
section {
height: 100vh;
display: flex;
flex-direction: column;
overflow: auto!important
}
.main.container {
flex-grow: 3;
height: auto;
padding: 0 50px;
overflow-y: scroll;
margin: 50px auto 50px auto;
display: flex;
align-items: center;
}
form {
width: 100%;
}
.edit {
width: 50%;
display: inline-block
}
.edit .input-file {
cursor: pointer
}
.edit.middle,
.edit.middle input {
width: 100%
}
.edit.custom-input {
width: 100%;
display: flex
}
.edit.right {
padding-left: 5px
}
.edit.left {
padding-right: 5px
}
.clickin {
margin: 15px 0
}
form>.box:nth-child(n+2) {
margin-top: 70px
}
.current-templates,
.mob {
display: none;
margin-top: 20px;
}
.current-templates .file {
padding: 10px;
font-size: 1.2rem
}
.current-templates .file:not(:first-child) {
margin-top: 20px
}
.current-templates .file,
.current-templates .options {
display: flex;
align-items: center
}
.current-templates .options {
width: 100%;
justify-content: space-around
}
.current-templates .file span {
white-space: nowrap
}
.current-templates .options {
margin-left: 30px;
list-style: none;
overflow: auto
}
.current-templates .options li {
padding: 4px 25px;
cursor: pointer;
white-space: nowrap;
text-align: center;
transition: background-color .2s var(--cubic-bezier)
}
.current-templates .options li:hover {
background-color: var(--hover-color)
}
.current-templates .options .opt[selected=true] {
background-color: rgba(18, 238, 102, .466)
}
.btn-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.btn-wrapper button {
padding: 10px;
font-size: 1.1rem;
cursor: pointer;
outline: 0;
border: solid #000 1px;
width: 200px;
margin-top: 30px
}
.btn-anim {
transition: background-color .2s var(--cubic-bezier), color .2s var(--cubic-bezier);
background-color: var(--input-color)
}
.btn-anim:hover {
background-color: var(--hover-color) !important;
color: #fff
}
.btn-anim-blocked:hover {
background-color: rgba(255, 110, 110, .363)!important;
color: #fff
}
.fas.fa-question {
font-size: .8rem;
margin-left: 15px;
cursor: pointer;
padding: 5px;
position: relative
}
.img {
position: absolute;
left: 100%;
top: 0;
visibility: hidden;
opacity: 0;
transform: translate(-50%, -150%);
transition: visibility .2s var(--cubic-bezier), opacity .2s var(--cubic-bezier), transform .2s var(--cubic-bezier)
}
button.refresh-options i {
background-color: transparent;
border: none;
border-radius: 100%;
padding: 5px 8px;
transition: transform 1s var(--cubic-bezier)
}
button.refresh-options {
background-color: transparent;
border: none;
padding: 8px;
font-size: 1rem;
cursor: pointer;
outline: 0;
display: none
}
.edit .input-file,
.edit input {
background-color: var(--input-color)
}
button.refresh-options:hover i {
transform: rotateZ(360deg)
}
.check-box {
margin: 15px 0 25px 1px;
display: flex;
align-items: center
}
.check-box .square {
position: relative;
width: 20px;
height: 20px;
background-color: transparent;
border: solid #fff 1px;
cursor: pointer
}
.check-box span {
margin-left: 20px
}
header {
position: fixed;
width: 100%;
background-color: transparent;
}
.container.nav-content {
padding: 0;
overflow: auto;
}
.container.nav-content {
grid-template-columns: auto 1fr;
justify-content: space-between;
}
ul.nav-opts {
justify-content: flex-end;
}
.fake-nav {
height: 74px;
margin-bottom: 30px;
}
<section>
<div class="fake-nav"></div>
<header>
<nav>
<div class="container nav-content">
<div class="brand">
<img src="" alt="clickin logo">
</div>
<ul class="nav-opts">
<li>Home</li>
<li>Posts</li>
<li>Imagens</li>
</ul>
</div>
</nav>
</header>
<div class="container main">
<div class="form-background"></div>
<form>
<div class="edit-wrapper box">
<div class="edit left"> <label>Id do board <i class="fas fa-question"> <img class="img" src="" alt="Board Id?"> </i></label> <input name="board_id" type="number" required> </div>
<div class="edit right"> <label>Nome do Grupo<i class="fas fa-question"> <img class="img" src="" alt="Nome do Grupo?"> </i></label> <input name="group_name" type="text" required> </div>
</div>
<div class="edit middle box"> <label>Diretório da pasta para construção da estrutura<i class="fas fa-question"> <img class="img" src="" alt="Diretório desejado?"> </i></label> <input name="desired_path" type="text" required> </div>
<div class="edit-wrapper box">
<div class="edit left"> <label>Diretório dos Templates<i class="fas fa-question"> <img class="img" src="" alt="Diretório dos templates?"> </i></label> <input name="templates_path" type="text" required> </div>
<div class="edit right"> <label>Selecione os templates<i class="fas fa-question"> <img class="img" src=""> </i></label> <label class="input-file btn-anim" for="templates">Templates</label> <input name="templates" disabled id="templates" type="file" accept=".psd" multiple
required> </div>
</div>
<div class="edit-wrapper">
<div class="check-box" data-selected="false">
<div class="square"></div>
<span>Templates estruturados em ordem</span>
</div>
</div>
<div class="edit-wrapper mob">
<button type="button" class="refresh-options btn-anim"> Recarregar temas por possíveis mudanças <i class="fas fa-redo-alt"></i> </button>
<center> <img width="100px" class="loader" src="" alt="loading"> </center>
</div>
<div class="current-templates" style="display: block;">
<div class="file" selected_topics="">
<span class="template-name">Template 1</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
<div class="file" selected_topics="">
<span class="template-name">Template 2</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
<div class="file" selected_topics="">
<span class="template-name">Template 3</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
</div>
<div class="btn-wrapper"> <button class="btn-anim" type="submit">Gerar!</button> </div>
</form>
</div>
<footer>Copyright 2021 © João Webber</footer>
</section>

Answer 1

I think the offending part of your CSS code is this one:
.main.container {
flex-grow: 3;
height: auto;
padding: 0 50px;
overflow-y: scroll;
margin: 50px auto 50px auto;
display: flex;
align-items: center;
}
The margin: 50px auto 50px auto; forces your main.container to get squeezed in between your header and your footer, but the form is contains is not following his parent height.
Either:
you remove the overflow-y: scroll from .main.container to allow the <form> to increase the height of his parent, but no more scroll bar inside .main.container.
or you set <form> height: 100% to force him to take its parent height, which will still cause the scroll bar to appear in .main.container (because the form content can't be squeezed) but the top of your <form> will be aligned to the top of .main.container.

Answer 2

It's about 'display: flex;' a flexbox is not just one single property, it's a whole module. If your interested in reading a article about flexbox: guide to use flex-box.
When you delete the display: flex; in your main container it will solve your problem.
.form-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
backdrop-filter: brightness(125%) hue-rotate(180deg) blur(10px);
background-color: rgba(0, 0, 0, .5)
}
/*
body {
background-image: url(https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}*/
section {
height: 100vh;
display: flex;
flex-direction: column;
overflow: auto!important
}
.container.main {
flex-grow: 3;
height: auto;
padding: 0 50px;
overflow-y: scroll;
margin: 50px auto 50px auto;
}
form {
width: 100%;
}
.edit {
width: 50%;
display: inline-block
}
.edit .input-file {
cursor: pointer
}
.edit.middle,
.edit.middle input {
width: 100%
}
.edit.custom-input {
width: 100%;
display: flex
}
.edit.right {
padding-left: 5px
}
.edit.left {
padding-right: 5px
}
.clickin {
margin: 15px 0
}
form>.box:nth-child(n+2) {
margin-top: 70px
}
.current-templates,
.mob {
display: none;
margin-top: 20px;
}
.current-templates .file {
padding: 10px;
font-size: 1.2rem
}
.current-templates .file:not(:first-child) {
margin-top: 20px
}
.current-templates .file,
.current-templates .options {
display: flex;
align-items: center
}
.current-templates .options {
width: 100%;
justify-content: space-around
}
.current-templates .file span {
white-space: nowrap
}
.current-templates .options {
margin-left: 30px;
list-style: none;
overflow: auto
}
.current-templates .options li {
padding: 4px 25px;
cursor: pointer;
white-space: nowrap;
text-align: center;
transition: background-color .2s var(--cubic-bezier)
}
.current-templates .options li:hover {
background-color: var(--hover-color)
}
.current-templates .options .opt[selected=true] {
background-color: rgba(18, 238, 102, .466)
}
.btn-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.btn-wrapper button {
padding: 10px;
font-size: 1.1rem;
cursor: pointer;
outline: 0;
border: solid #000 1px;
width: 200px;
margin-top: 30px
}
.btn-anim {
transition: background-color .2s var(--cubic-bezier), color .2s var(--cubic-bezier);
background-color: var(--input-color)
}
.btn-anim:hover {
background-color: var(--hover-color) !important;
color: #fff
}
.btn-anim-blocked:hover {
background-color: rgba(255, 110, 110, .363)!important;
color: #fff
}
.fas.fa-question {
font-size: .8rem;
margin-left: 15px;
cursor: pointer;
padding: 5px;
position: relative
}
.img {
position: absolute;
left: 100%;
top: 0;
visibility: hidden;
opacity: 0;
transform: translate(-50%, -150%);
transition: visibility .2s var(--cubic-bezier), opacity .2s var(--cubic-bezier), transform .2s var(--cubic-bezier)
}
button.refresh-options i {
background-color: transparent;
border: none;
border-radius: 100%;
padding: 5px 8px;
transition: transform 1s var(--cubic-bezier)
}
button.refresh-options {
background-color: transparent;
border: none;
padding: 8px;
font-size: 1rem;
cursor: pointer;
outline: 0;
display: none
}
.edit .input-file,
.edit input {
background-color: var(--input-color)
}
button.refresh-options:hover i {
transform: rotateZ(360deg)
}
.check-box {
margin: 15px 0 25px 1px;
display: flex;
align-items: center
}
.check-box .square {
position: relative;
width: 20px;
height: 20px;
background-color: transparent;
border: solid #fff 1px;
cursor: pointer
}
.check-box span {
margin-left: 20px
}
header {
position: fixed;
width: 100%;
background-color: transparent;
}
.container.nav-content {
padding: 0;
overflow: auto;
}
.container.nav-content {
grid-template-columns: auto 1fr;
justify-content: space-between;
}
ul.nav-opts {
justify-content: flex-end;
}
.fake-nav {
height: 74px;
margin-bottom: 30px;
}
<section>
<div class="fake-nav"></div>
<header>
<nav>
<div class="container nav-content">
<div class="brand">
<img src="" alt="clickin logo">
</div>
<ul class="nav-opts">
<li>Home</li>
<li>Posts</li>
<li>Imagens</li>
</ul>
</div>
</nav>
</header>
<div class="container main">
<div class="form-background"></div>
<form>
<div class="edit-wrapper box">
<div class="edit left"> <label>Id do board <i class="fas fa-question"> <img class="img" src="" alt="Board Id?"> </i></label> <input name="board_id" type="number" required> </div>
<div class="edit right"> <label>Nome do Grupo<i class="fas fa-question"> <img class="img" src="" alt="Nome do Grupo?"> </i></label> <input name="group_name" type="text" required> </div>
</div>
<div class="edit middle box"> <label>Diretório da pasta para construção da estrutura<i class="fas fa-question"> <img class="img" src="" alt="Diretório desejado?"> </i></label> <input name="desired_path" type="text" required> </div>
<div class="edit-wrapper box">
<div class="edit left"> <label>Diretório dos Templates<i class="fas fa-question"> <img class="img" src="" alt="Diretório dos templates?"> </i></label> <input name="templates_path" type="text" required> </div>
<div class="edit right"> <label>Selecione os templates<i class="fas fa-question"> <img class="img" src=""> </i></label> <label class="input-file btn-anim" for="templates">Templates</label> <input name="templates" disabled id="templates" type="file" accept=".psd" multiple
required> </div>
</div>
<div class="edit-wrapper">
<div class="check-box" data-selected="false">
<div class="square"></div>
<span>Templates estruturados em ordem</span>
</div>
</div>
<div class="edit-wrapper mob">
<button type="button" class="refresh-options btn-anim"> Recarregar temas por possíveis mudanças <i class="fas fa-redo-alt"></i> </button>
<center> <img width="100px" class="loader" src="" alt="loading"> </center>
</div>
<div class="current-templates" style="display: block;">
<div class="file" selected_topics="">
<span class="template-name">Template 1</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
<div class="file" selected_topics="">
<span class="template-name">Template 2</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
<div class="file" selected_topics="">
<span class="template-name">Template 3</span>
<ul class="options">
<li class="opt" selected="false">1 °</li>
<li class="opt" selected="false">2 °</li>
<li class="opt" selected="false">3 °</li>
</ul>
</div>
</div>
<div class="btn-wrapper"> <button class="btn-anim" type="submit">Gerar!</button> </div>
</form>
</div>
<footer>Copyright 2021 © João Webber</footer>
</section>