html - Inline block in a flexbox in the column direction -

how make c, d, e have display: inline-block occupy space need fit text inside of them , can appear next each (side side in row) in flexbox has flex-direction set column? please note not want wrap c, d, e in container desired result

body {    padding: 0;    margin: 0;  }    .container {    display: flex;    flex-direction: column;  }    .a,.b,.c,.d,.e {    height: 50px;    line-height: 50px;    border: 1px solid;    text-align: center;  }    .c,.d,.e {    display: inline-block;  }    .a {    background: cyan;  }    .b {    background: yellow;  }    .c {    background: orange;  }    .d {    background: gray;  }    .e {    background: pink;  }

<div class="container">    <div class="a">a</div>    <div class="b">b</div>    <div class="c">c</div>    <div class="d">d</div>    <div class="e">e</div>  </div>

i think best way go lines want take 100% (in width) , have else take 1 line.

you'll notice i've added flex-wrap: wrap; new line gets started when needed.

body {    padding: 0;    margin: 0;  }    .container {    display: flex;    flex-wrap: wrap;  }    .a,.b,.c,.d,.e {    height: 50px;    line-height: 50px;    border: 1px solid;    text-align: center;    flex-grow: 1;  }    .a {    background: cyan;  }    .b {    background: yellow;  }    .c {    background: orange;  }    .d {    background: gray;  }    .e {    background: pink;  }    .a,.b {    width: 100%;  }

<div class="container">    <div class="a">a</div>    <div class="b">b</div>    <div class="c">c</div>    <div class="d">d</div>    <div class="e">e</div>  </div>

edit: answer different ones above, have miss understood?