Why is Firefox not accepting bottom % padding values? [duplicate] - css

Question

This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 6 years ago.
I have problems with inconsistent looks between Chrome and Firefox. To my surprise, even after using reset.css I still have the same problems; it's like Firefox is not using any of the padding that are set in "%", if I set the padding in pixels then it does work.
W3 validator came out clean.
My problem:
Right side is Firefox, and that's after using reset.
This is the style of the div:
.hobbies {
text-align: center;
width: 100%;
height: 100%;
padding: 5% 10% 15% 10%;
background: #66B9BF;
color: #373737;
}
In Chrome, the padding is what stretches the div, but that's not happening in Firefox.
.me-wrap {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
padding: 3%;
background: #373737;
}
.hobby-title {
margin-bottom: 5%;
}
.hobbies {
text-align: center;
width: 100%;
height: 100%;
padding: 5% 10% 15% 10%;
background: #66B9BF;
}
.hobbies-icons{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
.icon {
font-size: 45px;
width: 80px;
height: 80px;
background-color: #373737;
border-radius: 100%;
line-height: 80px;
}
.icon-text {
font-size: 16px;
line-height: initial;
margin-bottom: 2%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="me-wrap">
<div class="hobbies">
<h1 class="hobby-title"> Hobbies/Interests </h1>
<div class="hobbies-icons">
<div class="icon"> <i class="fa fa-paw" aria-hidden="true"></i>
<p class="icon-text"> Animal lover </p>
</div>
<div class="icon"> <i class="fa fa-code" aria-hidden="true"></i>
<p class="icon-text"> Code enthusiast </p>
</div>
<div class="icon"> <i class="fa fa-bicycle" aria-hidden="true"></i>
<p class="icon-text"> Exercise practicioner </p>
</div>
<div class="icon"> <i class="fa fa-gamepad" aria-hidden="true"></i>
<p class="icon-text"> Videogame aficionado </p>
</div>
<div class="icon"> <i class="fa fa-hand-spock-o" aria-hidden="true"></i>
<p class="icon-text"> Geek culture adherent </p>
</div>
<div class="icon"> <i class="fa fa-leaf" aria-hidden="true"></i>
<p class="icon-text"> Outdoor nut </p>
</div>
</div>
</div>
</div>

Answer 1

This appears to be an issue that could be resolved by using an overflow: hidden; on the container that has the blue background and the fat grey border. Rather than being an issue with the hobbies class itself, it appears to be a problem with one of the parent containers. As one of the other commenters said, please post a bit more code and we can probably help out more.