Transition child width 100% when parent width changes - html

Question

I am having issues coming up with a way to make a child have transitionable width while making the parent change instantaneously.
Using the following example:
.parent {
height: 100px;
width: 25%;
background-color: blue;
}
.child {
width: 100%;
transition: width 1s;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
<div class="parent">
<div class="child">
</div>
</div>
When .parent is hovered, its width should increase, and then the child should take 1s to catch up to the parents width.
Is there any way to achieve this? I don't want the parent to transition as it will cause a lot of jumping around as the parent grows instead of moving everything at once.

Answer 1

You can't use transition, since the child's width value doesn't actually change - it was 100% before and 100% after.
In this case you can use an animation that will start from 50% if the new width, and proceed to the 100%. If the hover ends, the child width will go back to the parent's width immediately.
.parent {
height: 100px;
width: 25%;
background-color: blue;
}
.child {
width: 100%;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
.parent:hover .child {
animation: 1s both grow;
}
#keyframes grow {
from { width: 50%; }
to { width: 100%; }
}
<div class="parent">
<div class="child">
</div>
</div>

Answer 2

So keep in mind that div elements are block elements. They will fill the full-width of their parent unless you style them otherwise.
This makes using percentages problematic without adding a keyframes animation. Though there is nothing wrong with defining an animation.
But if you give exact widths with other types of css units, you can achieve the affect by also changing the width of the child when the parent is hovered.
Below I changed the parent width to 25vw and assigned the same width to the child. Then, when the parent is hovered, change the child width to 100% will cause it to transition.
In the original case, you were only changing the parents width, and the child's width never transitioned because in both states of the parent, its value was 100%.
.parent {
height: 100px;
width: 25vw;
background-color: blue;
}
.child {
width: 25vw;
transition: width 1s linear;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
.parent:hover > .child {
width: 100%;
}
<div class="parent">
<div class="child">
</div>
</div>

Answer 3

The issue is that you're child's width is technically not changing. It remains 100% of the parent's width, so though it's physical size as constrained within the parent changes, it's relative width value is still 100%, so no transition is being applied to it.
Using vw units will allow you to create a fluid layout with the width values being relative to the viewport (window) width instead of the containing div.
.parent {
height: 100px;
width: 25vw;
background-color: blue;
}
.child {
width: 25vw;
transition: width 1s;
background-color: red;
height: 50px;
}
.parent:hover, .parent:hover .child {
width: 50vw;
}
<div class="parent">
<div class="child">
</div>
</div>