Flex: taille d'une image par rapport à son contenant

#navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*justify-content: space-between;*/
  width:auto;
  height: 100px;
}
#navigation img {
  height: 100%;
}
nav {
  font-family: 'Fira Sans Condensed',sans-serif;
  background: var(--white);
  padding: 0 5px;
  flex: 20;
}
nav a {
  color: var(--black);
  text-decoration: none;
}

    <div id="navigation">
      <img class="logo" src="logo-ti-goudoul-image.jpg" alt="logo gite ti Goudoul">
      <!-- menu sur  https://webdesign.tutsplus.com/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535t  -->
      <div>
        <span class="font-reenie">ti Goudoul</span>
        <h1 class="h1-logo">gite à Moelan sur mer</h1>
      </div>
      <nav>
        <ul class="menu">
          <li class="item"><a href="#">Accueil</a></li>
          <li class="item"><a href="#">Gite<br><small>8 personnes</small></a></li>
          <li class="item"><a href="#">Services<br><small>& équipements</small></a></li>
          <li class="item"><a href="#">Tourisme<br><small>& activités</small></a></li>
          <li class="item"><a href="#">Blog</a></li>
          <li class="item"><a href="#">Contact</a></li>
          <li class="item button secondary"><a href="#">Réserver</a></li>
          <li class="item button secondary"><a href="#"><i class="fa-solid fa-magnifying-glass"></i> Rechercher</a></li>
          <li class="item button secondary"><a href="tel:+33633188199"><i class="fa-solid fa-phone"></i> 06 33 18 81 99</a></li>
          <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
        </ul>
      </nav>   
    </div>