Flexbox 包装后不向下推内容

Question

对不起，如果这个问题之前已经回答过，但我找不到类似的问题。 flexbox 的问题让我抓狂。我在一个网站中有两个部分，顶部包含一个带有两列的 flex 容器行，它包裹在我通过 min-width 在左列设置的 350px 断点上。右列包含一个带有 4 个元素的小网格。

section#porque-montiperes {
  position: relative;
  width: 100vw;
  height: 550px;
  margin-top: 150px;
}

section#porque-montiperes .row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

section#porque-montiperes .row .left-column {
  flex: 1;
  height: 100%;
  min-width: 350px;
  background-image: url(../img/lock.jpg);
  background-size: cover;
  background-position: center;
}

section#porque-montiperes .row .right-column {
  flex: 1;
  display: grid;
  padding: 25px;
  grid-template-columns: 250px 250px;
  grid-template-rows: 50% 50%;
  gap: 10px;
  justify-content: space-evenly;
  max-height: 100%;
}

#latest-works {
  position: relative;
  width: 100vw;
  background: #cc0;
  height: 800px;
  margin-top: 100px;
}

<!--SECTION TOP -->
<section id="porque-montiperes">
  <div class="row">
    <div class="left-column">
      <div class="porque-montiperes-heading">
        <h5>Porquê escolher a</h5>
        <h2>MontiPeres</h2>
        <button class="cta ">
                            Saber mais
                            <img src="img/icons/seta.svg" alt="">
                        </button>
      </div>
    </div>
    <div class="right-column">
      <div class="info-box">
        <img src="img/icons/escudo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Qualidade</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/sucesso.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Experiência</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/cadeado.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Segurança</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/acordo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Profissionalismo</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!--SECTION BOTTOM -->
<section id="latest-works">
  <h1 style="text-align:center;margin-top: 100px;">bottom section</h1>
</section>

这是我在包装之前的：

发生包装时，底部没有按预期向下推，我不知道为什么。这就是正在发生的事情

有人可以帮我解决这个问题吗？

Answer 1

您粘贴的代码中存在一些问题，我也清理了它们——你的 CSS 是嵌套的——是 LESS 还是 SASS 还是什么？我将您的 $color 变量切换为灰色，这样我也可以使用它。

但解决问题的更改在第 3 行 - 您的高度应该是“最小高度”，以便在需要时允许内容占用超过 550 像素。事实上，底部是覆盖溢出，而不是内容。

section#porque-montiperes {
  position: relative;
  width: 100vw;
  min-height: 550px;
  margin-top: 150px;
}

.row
{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.left-column {
  flex: 1;
  height: 100%;
  min-width: 350px;
  background-image: url(../img/lock.jpg);
  background-size: cover;
  background-position: center;
}
.right-column {
  flex: 1;
  display: grid;
  padding: 25px;
  grid-template-columns: 250px 250px;
  grid-template-rows: 50% 50%;
  gap:10px;
  justify-content: space-evenly;
  max-height: 100%;
}

#latest-works {
    text-align:center;
    margin-top: 100px;
    position: relative;
    width: 100vw;
    background: gray;
    height: 800px;
    margin-top: 100px;
}

<section id="porque-montiperes">
  <div class="row">
    <div class="left-column">
      <div class="porque-montiperes-heading">
        <h5>Porquê escolher a</h5>
        <h2>MontiPeres</h2>
        <button class="cta ">
          Saber mais
          <img src="img/icons/seta.svg" alt="">
        </button>
      </div>
    </div>
    <div class="right-column">
      <div class="info-box"> 
        <img src="img/icons/escudo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Qualidade</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/sucesso.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Experiência</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/cadeado.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Segurança</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/acordo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Profissionalismo</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>
    </div>
  </div>   
</section>

<!--SECTION BOTTOM -->
<section id="latest-works">
  <h1>bottom section</h1>
</section>

Answer 2

您可以将display: inline-block; 添加到第一个section 元素。希望这会有所帮助！