Отрегулируйте размер дочерних элементов, если они переполняют родительский элемент

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 здесь .

Как видно на правой сторонезаголовка элементы списка <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>

EDIT

Я создал Stackblitz с двумя возможностями:

• навигация остается в пределах одной строки, все, что выходит за пределы контейнера, скрыто, но вы можете прокрутить по оси x
• li элементы обернуты так, что все элементы видны