Wrap text inside content border

Issue

For my project, I need to create this filter list. I succeeded in doing almost everything, but I have a small problem.

The border of my item list don't wrap my text content. I tried to resolve it by using overflow:auto and flex-flow: row wrap, but it don't work out.

Here is my code:

#filter-content{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    padding: 16px 0px 0px 16px;
}

#filter-nav{
    display: flex;
    flex-direction: row;
    list-style: none;
}

.filter-item{
    color: black;
    font-family: Raleway;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    width: 100px;
    line-height: 20px;
    text-align: center;
    margin-top: 5px;
    margin-right: 30px;
    border: 2px solid #F2F2F2;
    border-radius: 10px;
    cursor: pointer;
}

.filter-item:hover{
    transform: scale(1.1);
    background-color: #DEEBFF;
}

#money-icon{
    position: relative;
    right: 12px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#dog-icon{
    position: relative;
    right: 25px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#heart-icon{
    position: relative;
    right: 9px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#person-icon{
    position: relative;
    right: 15px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div id="filter-content">
  <h3>Filters</h3>
    <ul id="filter-nav">
      <li class="filter-item"><i id="money-icon" class="fa-solid fa-money-bill-wave"></i>Low cost</li>
       <li class="filter-item"><i id="person-icon" class="fa-solid fa-child-reaching"></i>Family-friendly</li>
       <li class="filter-item"><i id="heart-icon" class="fa-solid fa-heart"></i>Romantic</li>
       <li class="filter-item"><i id="dog-icon" class="fa-solid fa-dog"></i>Pets allowed</li>
    </ul>
</div>

I thank in advance anyone who will take the time to help me.

Solution

Change the static height: 10px to height: max-content; on .filter-item.

#filter-content{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    padding: 16px 0px 0px 16px;
}

#filter-nav{
    display: flex;
    flex-direction: row;
    list-style: none;
}

.filter-item{
    color: black;
    font-family: Raleway;
    font-size: 14px;
    font-weight: bold;
    height: max-content;
    width: 100px;
    line-height: 20px;
    text-align: center;
    margin-top: 5px;
    margin-right: 30px;
    border: 2px solid #F2F2F2;
    border-radius: 10px;
    cursor: pointer;
}

.filter-item:hover{
    transform: scale(1.1);
    background-color: #DEEBFF;
}

#money-icon{
    position: relative;
    right: 12px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#dog-icon{
    position: relative;
    right: 25px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#heart-icon{
    position: relative;
    right: 9px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

#person-icon{
    position: relative;
    right: 15px;
    bottom: 2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #DEEBFF;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div id="filter-content">
  <h3>Filters</h3>
    <ul id="filter-nav">
      <li class="filter-item"><i id="money-icon" class="fa-solid fa-money-bill-wave"></i>Low cost</li>
       <li class="filter-item"><i id="person-icon" class="fa-solid fa-child-reaching"></i>Family-friendly</li>
       <li class="filter-item"><i id="heart-icon" class="fa-solid fa-heart"></i>Romantic</li>
       <li class="filter-item"><i id="dog-icon" class="fa-solid fa-dog"></i>Pets allowed</li>
    </ul>
</div>

Answered By - Kameron