The "avatar" has a fixed with and height of 32px. But it’s width decreases when there is not enough horizontal space inside of the flexbox. How can I prevent this? I rather want the "text" to shrink in width.
.container {
display: flex;
align-items: center;
background: #eee;
max-width: 200px;
padding: 0.5rem;
}
.avatar {
width: 32px;
height: 32px;
background: #222;
border-radius: 100%;
}
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.button {
white-space: nowrap;
}<div class="container">
<div class="avatar"></div>
<p class="text">This is an example text</p>
<button class="button">Click me</button>
</div>>Solution :
.avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
background: #222;
border-radius: 100%;
}
Update your css to this