Animate flex transitions

Question

So I don't believe this has been answered elsewhere. I have been looking over CSS tricks and also http://n12v.com/css-transition-to-from-auto/ but am not sure if the following is possible.

What I want to do is animate a flex child if it changes width. That width change could be triggered from within the child itself. Here is some sample code:

.container {
  width: 600px;
  display: flex;
}

.flexy {
  transition: all 10s;
  max-width: 500px;
}

<div class="container">
  <div class="flexy" style="background-color:red;">This is some random text</div>
  <div class="flexy" style="background-color:green;">
    <div style="width:300px">Resize this to animate?</div>
  </div>
  <div class="flexy" style="background-color:blue;">This is some more random text</div>
</div>

So what I want is the flexy boxes to animate to their sizes and most importantly if (in say firebug) you change the 300px width to 500px I would want the flexy parent (of the 300px div) to animate too. Is that even possible?

Answer 1

If I understand correctly, you want the Green div to animate a change in "width".

As you say you can't aninate to/from auto but you can animate from one defined valued to another.

In thie case we can take advantage of flex-basis rather than width

.container {
  width: 600px;
  display: flex;
  margin: 1em auto;
}

.container>div {
  transition: all 2s;
}

.flexy {
  transition: all 2s;
  flex: 0 0 300px;
  background: green;
}

.flexy:hover {
  flex: 0 0 500px;
}

<div class="container">
  <div class="" style="background-color:red;">This is some random text</div>
  <div class="flexy">
    <div style="">Resize this to animate?</div>
  </div>
  <div class="" style="background-color:blue;">This is some more random text</div>
</div>