html - 高度为 :auto and Flexbox 的问题

Question

我正在尝试使用 Flexbox 将我的页面设置为 3 列。

3 列设置得很好，我遇到的问题是 section1 div 没有子元素那么高。

我试过height: auto, height:100%, overflow: auto, overflow:visible等。 section1 div 唯一一次改变高度是当我明确说明像素高度时。似乎 flexbox 元素充当 float ，所以我尝试了 clear:both 但无济于事。

我搜索了 stackoverflow 和其他网站，但没有找到让我相信这是我在使用 flexbox 时做错了什么的答案。

body {
  background: lightgrey;
}
.body {
  position: relative;
  width: 75% /* 747.75px */;
  margin: auto;
  top: -3.5em;
  background-color: white;
  border-top: 3px solid #ff8400;
}
.top-border {
  display: block;
  position: relative;
  top: 2em;
  border-top: 1px solid #eef3f0;
  width: 95%;
  left: 2.5%;
}
.section1 {
  position: relative;
  display: flex;
  justify-content: space-around;
  top: 5em;
  height: auto;
}

<div class="body">
  <div class="top-border"></div>
  <div class="section1">
    <div class="what-i-do">
      <img class="what-i-do-icon" src="images/what-i-do.png" />
      <h1 class="what-i-do-title">What I Do</h1>
      <p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
      <p class="view-more-btn">View More</p>
    </div>
    <div class="development">
      <img class="development-icon" src="images/development.png" />
      <h1 class="development-title">Development</h1>
      <p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
    <div class="design">
      <img class="design-icon" src="images/design.png" />
      <h1 class="design-title">Design</h1>
      <p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
        consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
  </div>
</div>

Answer 1

参见 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.

在这里您不想移动单个框，您希望它也推送以下内容。然后，你应该使用 margins为此。

body {
  background: lightgrey;
}
.body {
  width: 75% /* 747.75px */;
  margin: auto;
  margin-top: -3.5em;
  background-color: white;
  border-top: 3px solid #ff8400;
}
.top-border {
  top: 2em;
  border-top: 1px solid #eef3f0;
  width: 95%;
  margin-left: 2.5%;
}
.section1 {
  display: flex;
  justify-content: space-around;
  margin-top: 5em;
}

<div class="body">
  <div class="top-border"></div>
  <div class="section1">
    <div class="what-i-do">
      <img class="what-i-do-icon" src="images/what-i-do.png" />
      <h1 class="what-i-do-title">What I Do</h1>
      <p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
      <p class="view-more-btn">View More</p>
    </div>
    <div class="development">
      <img class="development-icon" src="images/development.png" />
      <h1 class="development-title">Development</h1>
      <p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
    <div class="design">
      <img class="design-icon" src="images/design.png" />
      <h1 class="design-title">Design</h1>
      <p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
        consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
  </div>
</div>