如何防止css中的元素溢出？

Question

所以我试图在 header 中创建徽标和菜单图标，但由于某些原因，它们总是溢出我严格指定的 header 的高度！这是为什么？

而且我知道我可以使用 overflow:hidden; 属性隐藏溢出的项目，但这并不总是一个好的情况。

例如，我尝试创建一个汉堡包图标，但由于这个溢出问题而无法创建。菜单行就像显示了整个元素一样工作，但我不得不将其隐藏起来，以便它适合 header.

这是代码-

    <header>
  <div class="logo">
Elvis
  </div>
  
   <div class="menu">
Hamburger Menu
  </div>
  
</header>

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

这是代码笔link - https://codepen.io/raghav-sharma333/pen/eYeZYGO

这是问题的图片 - Overflowing content

所以我只想知道:

为什么会这样？

&

如何预防？

Answer 1

在这种情况下，最好使用位置来管理元素的继承我修改了你的代码：

*{
  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 2

首先：你使用 33px 字体添加填充的原因，然后你在菜单上使用 height:100px 而在你的 header 上你放了一个 height:60px 您还需要添加 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 3

基本上，您通过给元素静态高度（菜单上的高度 100px 和徽标上的 padding-top/bottom 30px）来强制元素高于 header 本身

我更新了你的笔：https://codepen.io/penmasterx/pen/wvPGaGz

使用高度100%，所以元素适应header。

如果这能解决您的问题，请告诉我。如果没有，请更详细地告诉我您要完成的任务。

我在笔中添加的内容：

.logo {
  height: 100%;
  display: flex;
  align-items: center;
  /* removed padding top/bottom */
}

.menu {
  height: 100%;
}

Answer 4

我做的和 'Ali Memar' 答案一样，但不同之处在于文本的位置。他们现在在 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>

如何防止css中的元素溢出？

How to prevent overflowing of an element in css?

html

css

layout

overflow

flexbox