Wrap text inside content border - html

Question

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.

Answer 1

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>