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

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 >
Elvis
  </div>
  
   <div >
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?

CodePudding user response：

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%;
}

CodePudding user response：

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 >
    <div >Elvis</div>
    <div >Hamburger Menu</div>
  </div>
</header>

CodePudding user response：

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;
}

CodePudding user response：

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 >
    <div >Elvis</div>
    <div >Hamburger Menu</div>
  </div>
</header>