How to prevent overflowing of an element in css? - html

Question

So I am trying to create a logo and a menu icon in the header but for some reason, they are always overflowing the height of the header which I have strictly specified! Why is that ?
And I know I can hide out the overflowing items by using overflow:hidden; property but it is not always a good case.
For example, I tried to create a hamburger icon but I could not because of this overflow issue. The menu lines were working as if the entire element is shown but I had to hide it out so that it could fit into the header.
Here is the code -
<header>
<div class="logo">
Elvis
</div>
<div class="menu">
Hamburger Menu
</div>
</header>
In CSS -
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid red;
}
.logo {
font-size: 33px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 100px;
width: 100px;
background-color: #bd4439;
}
Here is the codepen link -
https://codepen.io/raghav-sharma333/pen/eYeZYGO
Here is the image of the issue -
Overflowing content
So I just want to know :
Why is it happening?
&
How can it be prevented?

Answer 1

Basically you are forcing your elements to be higher than the header itself by giving them static heights (height 100px on the menu and padding-top/bottom 30px on the logo)
I updated your pen: https://codepen.io/penmasterx/pen/wvPGaGz
Using height 100%, so the elements adapt to the header.
Let me know if this solves your problem. If not, let me know in more detail what you're trying to accomplish.
What I added to the pen:
.logo {
height: 100%;
display: flex;
align-items: center;
/* removed padding top/bottom */
}
.menu {
height: 100%;
}

Answer 2

In such cases, it is better to use the position to manage the inheritance of the elements
I modified your code:
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>

Answer 3

First: the reason you use a 33px font which adds padding, then you use a height:100px on the menu while on your header you put a height:60px
you also need to add align-self: center on your flex-box
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
border: 2px solid red;
}
.logo {
font-size: 17px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 60px;
width: 100px;
background-color: #bd4439;
}

Answer 4

I did it like 'Ali Memar' answer but the difference is the position of the texts. they are now in the middle of the div.
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
text-align: center;
display: flex;
align-items: center
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
text-align: center;
display: flex;
align-items: center
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>