Issue with height:auto and Flexbox - html

Question

I'm trying to setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with 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

See 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.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
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>