Width transition on child element is not applied to parent

Question

I'm trying to achieve a little effect that I thought would be an easy one: make a child div expand in width when its parent is hovered, and having the parent's width transitionning alongside.

The emphasis emphasises what my problem is ; with what I've achieved so far, when hovering the parent, it expand instantly to the final total width, as if it knew beforehand the final width of its child after the transition, while the child does indeed transition to this final width.

Here's a sample that illustrates the problem:

.profile {
  cursor: pointer;
  background-color: red;
  border-radius: 100px;
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
}

.profile:hover .name {
  width: 100%;
}

.profile .picture {
  margin-right: 3px;
  display: inline-block;
  padding: 3px;
  width: 27px;
  height: 27px;
}

.profile .picture img {
  border-radius: 50px;
  width: 27px;
  height: 27px;
}

.profile .name {
  transition-property: width;
  transition-duration: 4s;
  width: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

<div class="profile">
  <div class="picture">
    <img src="https://s.gravatar.com/avatar/090a196b0a7db8a888d3b1af34e55cdc?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fja.png" alt="Avatar" />
  </div>
  <div class="name">John Doe</div>
</div>

I don't understand why the parent does not follow the child width. Is this related to the fact that the parent is a flex box? Am I missing some property on the parent? I've tried adding a transition: all 4s on the parent too, without success.

Would I be better of using the translate function somehow?

Any help appreciated!

@Paulie_D Oh. So the parent not having any defined `width` means it has a default `auto` value. Didn't know that. But I cannot define a specific `width` for the parent, as its width depends upon its content (e.g. the name length of the user varies). I don't think there is a `width` value that allows both transitions and the element being as wide as it's content, now is there? — Tazaf, Nov 20 '19 at 14:40
Probable duplicate - https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Paulie_D, Nov 20 '19 at 15:13

score 1 · Accepted Answer · answered Nov 20 '19 at 17:03

This is because .name class has it's width in px, while your .name:hover has it's width with %.

If you want to make a change in width transition, your class and it's hover action must be in the same measuring unit.

The problem is, if the text of class name is dynamic, you will never know it's actual width to use it on transition, I've made a work-around using JavaScript and CSS variables to set the actual width in :hover action.

This might be not the best answer, but at least it works!.

let width = document.getElementById('name').offsetWidth;
document.documentElement.style.setProperty('--w', width + "px");
document.getElementById('name').style.width = "0px";

:root{
  --w: 0;
}

.profile {
  cursor: pointer;
  background-color: red;
  border-radius: 100px;
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
}

.profile:hover .name {
  width: var(--w)!important;
}

.profile .picture {
  margin-right: 3px;
  display: inline-block;
  padding: 3px;
  width: 27px;
  height: 27px;
}

.profile .picture img {
  border-radius: 50px;
  width: 27px;
  height: 27px;
}

.profile .name {
  transition-duration: 1s;
  display: inline-block;
  overflow: hidden;
  white-space:nowrap;
}

<div class="profile">
  <div class="picture">
    <img src="https://s.gravatar.com/avatar/090a196b0a7db8a888d3b1af34e55cdc?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fja.png" alt="Avatar" />
  </div>
  <div class="name" id="name">John Doe</div>
</div>

Well... you are indeed answering the theorical part of the question which was to know why this behavior occured. If, as you said, I set the width to an actual value instead of `100%`, the transition runs exactly as expected. — Tazaf, Nov 21 '19 at 08:16
The workaround you propose seems easy to implement and involves very few JS. This is not what I hoped for, but for the time being, I'll accept this answer. — Tazaf, Nov 21 '19 at 08:20

Width transition on child element is not applied to parent

1 Answers1