Parent with height: self doesn't have children's height - css

Question

Hello I have a parent with positon absolut and height: self that is not with the height of children like this:
css:
const UserProfile = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.5rem;
cursor: pointer;
position: relative;
& .user_text {
cursor: pointer;
display: flex !important;
flex-direction: column;
padding-right: 0.75rem !important;
span:first-of-type {
font-size: 1rem;
color: #b5b5c3 !important;
font-weight: 500 !important;
text-align: right !important;
}
span:last-of-type {
font-size: 1rem;
color: #464e5f !important;
font-weight: 600 !important;
text-align: right !important;
}
}
& .user_avatar {
border-radius: 50%;
flex-shrink: 0;
position: relative;
transition: border-color 0.2s;
width: 45px;
z-index: 1;
img {
min-height: 100%;
object-fit: cover;
-o-object-fit: cover;
width: 100%;
}
}
`;
const UserCanvas = styled.div`
position: absolute;
min-width: 10rem;
display: ${props => (props.isOpen ? "block" : "none")};
border: 1px solid rgba(0, 0, 0, 0.15);
border-color: rgba(120, 130, 140, 0.13);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
top: 100%;
bottom: 0;
font-size: 1rem;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border-radius: 0.25rem;
& .test {
min-width: 10rem;
height: 200px;
}
`;
jsx:
<UserProfile onClick={() => setOpen(!isOpen)}>
<div className="user_text">
<span>SpiriT</span>
<span>Web Developer</span>
</div>
<div className="user_avatar">
<img src={LogoImage} />
</div>
<UserCanvas isOpen={isOpen}>
<div className="test">a</div>
</UserCanvas>
</UserProfile>
example:
https://codesandbox.io/s/youthful-hooks-ceo85?file=/src/App.js:743-2099
basically i need the div with position absolute and height auto to follow the height of yours children

Answer 1

Change the display to table for the parent component and table-row t like this:
const UserCanvas = styled.div`
// ... other properties
display: ${props => (props.isOpen ? "table" : "none")};
& .test {
min-width: 10rem;
height: auto;
display: table-row;
}
`;
Alternately, you can add height: max-content; to the Parent Component.