How to adjust height of div based on content - css

Question

I have designed a reusable ListItem component which I then map over in another component to create a List. The list looks good in an expanded window however when I shrink the window size the text overflows out of the div and onto subsequent items in the list. I am trying to understand how to make it so the height of the list item changes depending on the text inside.
I have searched for an answer and tried the following without success:
in #list-item set height:auto
in #list-item set height:fit-content
In displaying component apply a style of "display:block" to ListItem component during mapping.
Issue Screenshot
Result of solutions 1 and 2 above
No difference using solution 3
ListItem.js
export default function ListItem(props) {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => setAnchorEl(event.currentTarget);
const handleClose = () => setAnchorEl(null);
return (
<div>
<div id='list-item'>
<div id="label-container">
<Typography id="type" variant="caption">{props.type}</Typography>
<p id="title">{props.title}</p>
</div>
<SvgIcon id="icon" onClick={handleClick}>
<ListIcon />
</SvgIcon>
</div>
<Divider id="divider" />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>View / Edit</MenuItem>
<MenuItem onClick={handleClose}>Add to Community</MenuItem>
<MenuItem onClick={handleClose}>Share with...</MenuItem>
</Menu>
</div>
)
}
ListItem.css
#list-item {
display:flex;
width:70%;
min-height:54px;
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
}
#label-container {
display:flex;
flex-direction: column;
justify-content: center;
}
#type {
position: absolute;
margin-right: 40px;
top: 5px;
left: 10px;
}
#title {
position: absolute;
margin-top: 0px;
margin-right: 40px;
top:25px;
left:10px;
}
#divider {
width:70%;
margin: 0 auto;
}
#no-margin {
margin:0;
}
#icon {
position: absolute;
fill: #70CDE5;
right: 10px;
}
#media screen and (max-width: 600px){
#list-item{
width:100%;
}
#divider {
width: 100%;
}
}
Displaying Component
...
{listData.map((item, index) => (
<ListItem key={item.title} type={item.type} title={item.title} />
))}
...
Thank you

Answer 1

It's probably because you have position: absolute on your Typography and p.
When set position: absolute to any element it removed it from the document flow, that's why your list height is the min-height: 54px only.
Try removing position: absolute
#type {
margin-right: 40px;
}
#title {
margin-top: 0px;
margin-right: 40px;
}