如果子项溢出父项，则调整它们的大小

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元素已包装，因此所有元素都是可见的