html - How to make flex child height to wrap content -

this question has answer here:

• how disable equal height columns in flexbox? 2 answers

what want make each child element's height wrap content.

here code:

<style>  .parent{         display: flex;     }  .child{      padding: 5px;     margin: 10px;     background: green;     height: auto; }     </style>  <div class="parent">      <div class="child">child1</div>     <div class="child">child2</div>     <div class="child">child3</div>     <div class="child" style="height:50px">child1</div>  </div> 

output:

expected output:

you need set align-items: flex-start on parent element because default value stretch.

.parent {    display: flex;    align-items: flex-start;  }    .child {    padding: 5px;    margin: 10px;    background: green;    height: auto;  }

<div class="parent">    <div class="child">child1</div>    <div class="child">child2</div>    <div class="child">child3</div>    <div class="child" style="height:50px">child1</div>  </div>