html - 溢出隐藏内容

Question

问题出在“容器主” div 上，它有溢出-y。当<form>高度增加并且溢出开始在“容器 div”上工作时，不可能看到整个表单并且顶部被隐藏

我不认为这是正常行为，我已经解决了这个问题几个小时，只是无法按照我想要的方式解决它（通过将表单以“容器主”弹性框居中）

.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><a href="/">Home</a></li>
          <li><a href="/posts">Posts</a></li>
          <li><a href="/images">Imagens</a></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>

标签： htmlcss

Answer 1

这是关于“显示：弹性；” 一个 flexbox 不仅仅是一个单一的属性，它是一个完整的模块。如果您有兴趣阅读有关 flexbox 的文章：使用 flex-box 的指南。

删除显示时：flex; 在您的主容器中，它将解决您的问题。

.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><a href="/">Home</a></li>
          <li><a href="/posts">Posts</a></li>
          <li><a href="/images">Imagens</a></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>