Flexbox Wrap Not Working On 4 Of My Images - html

Question

Hello Im not sure why but for some reason flexbox is not working.
I have 4 images on one section. I added flexbox wrap on the container and I also assigned flex 1
on the children images but for some reason flexbox is not working.
If anyone could help and let me know what I am doing wrong I would really appreciate it.
https://codepen.io/rubenjr005/pen/rNexOZp?editors=0100
HTML CODE
<div id="capabilities" class="bg-dark-02 py-2 angle-top-bottom-right">
<div class="capabilities-title">
<h4 class="section-title text-center">CAPABILITIES</h4>
<h3 class="lead text-center">I DO THINGS LIKE</h3>
</div>
<div class="capabilities-container">
<div class="category">
<div class="content">
<img src="img/graphic-design-icon_03.png" alt="Graphic Design" />
<div class="text-animation">
<h3 class="text-center">GRAPHIC DESIGN</h3>
</div>
</div>
</div>
<div class="category">
<div class="content">
<img src="img/Web-Design-icon_01.jpg" alt="Web Design" />
<div class="text-animation">
<h3 class="text-center">Web Design</h3>
</div>
</div>
</div>
<div class="category">
<div class="content">
<img src="img/web-development-01.png" alt="web Development" />
<div class="text-animation">
<h3 class="text-center">Web Development</h3>
</div>
</div>
</div>
<div class="category category4">
<div class="content">
<img src="img/email-development.png" alt="Email Development" />
<div class="text-animation">
<h3 class="text-center">Email Development</h3>
</div>
</div>
</div>
</div>
</div>
SCSS
#capabilities {
height: 100%;
margin-bottom: 4.5rem;
.capabilities-container {
display: flex;
flex-wrap: wrap;
// min-width: 20%;
.category {
display: flex;
// flex-direction: column;
flex: 1;
padding: 1rem;
align-items: center;
justify-content: center;
min-width: 10rem;
// width: 10rem;
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
position: absolute;
top: 30%;
height: 12rem;
width: auto;
display: block;
// margin: auto;
margin-bottom: 4rem;
opacity: 0.4;
transition: 0.75s;
// padding-bottom: 4rem;
}
.text-animation {
// position: absolute;
text-align: center;
padding-top: 15rem;
transition-duration: 0.75s;
text-align: center;
left: 0;
right: 0;
// background: red;
// margin: auto;
h3 {
color: white;
text-transform: uppercase;
// margin: auto;
}
}
}
}
.category:hover .content img {
opacity: 1;
margin-bottom: 1rem;
// padding-bottom: 0rem;
// padding-bottom: 0rem;
}
.category:hover .content .text-animation {
// opacity: 1.0;
padding-top: 10rem;
}
}
}

Answer 1

You have to get rid of absolute positioning on your img and you'll have to use media queries.
Starting from there, you'll see the flex-wrap: wrap working.
Here is a fork : https://codepen.io/hisato/pen/vYGLLNY?editors=0100
Also, if I may add, as a general advice avoid to transition margin/padding/top/left etc. You should always look for a way to transition the transform property, it will have the best performance.