Question 203259 in Html Question posted in
Some basic documentation can be found here.

Html – Element doesn't maintain its width when there is not enough space in Flexbox

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>
Tags:

2

Answers


  1. 0

    Add "min-width: 32px;" to the avatar class.

    .avatar {
  width: 32px;
  height: 32px;
  background: #222;
  border-radius: 100%;
  min-width: 32px; //Edited
}
    Login or Signup to reply.
  2. 0 
    .avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #222;
    border-radius: 100%;
}

    Update your css to this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search