css - Slide-in from the left with width: auto -

i'm implementing toolbar using flex boxes , want optional sections appear smoothly sliding in left.

at start, bar should if new element didn't exist, , @ end if animation never took place

animating 0% { margin-left: -<width> } works intended, when element's width known @ point; need work width: auto (i.e. unset width) or other non-lengths when flexing.

@keyframes appear {    0% { margin-left: -30ch; }  }  div.a {    width: 30ch; /* << should work without */    flex: none; /* << stretch: should work flex */    animation: appear 1s ease-in-out infinite alternate;  }    .root {    margin: 10px;    border: 1px solid black;    display: flex;    overflow: hidden;  }  .a, .b, .c {    box-sizing: border-box;    padding: 5px;    flex: 1;  }  .b { flex: 2 }  .a { background: #88f }  .b { background: #8d8 }  .c { background: #f88 }

<div class="root">    <div class="a">some new stuff</div>    <div class="b">hello</div>    <div class="c">world</div>  </div>    <div class="root">    <div class="a">some longer content sliding in</div>    <div class="b">hello</div>    <div class="c">world</div>  </div>

width:auto; not animatable. use max-width:1000px; or larger width ever need be. code be:

 width:auto;  max-width:1000px;