html - 如果子项溢出父项，则调整子项的大小

Question

我有以下用于网站标题的简单代码:

body {
  margin: 0;
}


.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation>ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation>ul>li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

<div class="header">	

  <div class="image">
   Image
  </div>
  
    <nav class="navigation"> 
      
      <ul>
        
        <li> <a> 1.0 Menu </a> </li>
        <li> <a> 2.0 Menu </a> </li>
        <li> <a> 3.0 Menu </a> </li>
        <li> <a> 4.0 Menu </a> </li>
        <li> <a> 5.0 Menu </a> </li>
        <li> <a> 6.0 Menu </a> </li>
        <li> <a> 7.0 Menu </a> </li>
        <li> <a> 8.0 Menu </a> </li>
        <li> <a> 9.0 Menu </a> </li>
        <li> <a> 10.0 Menu </a> </li>
        <li> <a> 11.0 Menu </a> </li>
        <li> <a> 13.0 Menu </a> </li>
        <li> <a> 14.0 Menu </a> </li>
        <li> <a> 15.0 Menu </a> </li>
        <li> <a> 16.0 Menu </a> </li>
        <li> <a> 17.0 Menu </a> </li>
        <li> <a> 18.0 Menu </a> </li>
          
      </ul>
        
    </nav>
      
</div>

代码也可以在 jsfiddle 中找到here .

正如您在标题右侧看到的列表项 <li>越过父项的边缘 ul和 nav .

为了避免这种情况，我尝试使用 overflow: hidden .然而，这个解决方案减少了溢出的 <li>右侧的元素但可能的目标是每个 <li> 的大小元素会自动调整，因此它始终适合父元素。

我必须更改我的代码才能实现此目标吗？

Answer 1

我已经稍微调整了您的 css，使页眉高度根据 li 高度增长。现在 li 元素内的文本换行并适合其父元素。

仍然存在的一个问题是，如果 ul 的内容比您的导航 div 宽，li 元素将溢出容器。如果它对你的元素没问题，你可以添加 flex-wrap: wrap; 到 ul 这样 li 元素就会被包装(我已经也添加了那一点，只需删除注释以查看其效果)。

body {
  margin: 0
}

.header {
  width: 80%;
  /* height: 10%; */
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: #ff0
}

.image {
  width: 30%;
  /* height: 100%; */
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green
}

.navigation {
  width: 70%;
  /* height: 100%; */
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua
}

.navigation>ul {
  /* height: 100%; */
  display: flex;
  /* flex-wrap: wrap; */
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue
}

.navigation>ul>li {
  /* width: 100%; */
  flex: 1 0 50px;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px
}

<div class="header">	

  <div class="image">
   Image
  </div>
  
<nav class="navigation"> 
  
  <ul>
    
    <li> <a> 1.0 Menu </a> </li>
    <li> <a> 2.0 Menu </a> </li>
    <li> <a> 3.0 Menu </a> </li>
    <li> <a> 4.0 Menu </a> </li>
    <li> <a> 5.0 Menu </a> </li>
    <li> <a> 6.0 Menu </a> </li>
    <li> <a> 7.0 Menu </a> </li>
    <li> <a> 8.0 Menu </a> </li>
    <li> <a> 9.0 Menu </a> </li>
    <li> <a> 10.0 Menu </a> </li>
    <li> <a> 11.0 Menu </a> </li>
    <li> <a> 13.0 Menu </a> </li>
    <li> <a> 14.0 Menu </a> </li>
    <li> <a> 15.0 Menu </a> </li>
    <li> <a> 16.0 Menu </a> </li>
    <li> <a> 17.0 Menu </a> </li>
    <li> <a> 18.0 Menu </a> </li>
      
  </ul>
    
</nav>
  
</div>

编辑

我创建了一个 Stackblitz有两种可能性:

• 导航保持在一行内，溢出容器的所有内容都被隐藏，但您可以在 x 轴上滚动
• li 元素被包裹起来，因此所有元素都可见