How to make flex child height to wrap content

Question

What I basically want is to make each child element's height to wrap its content.

Here is my 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:

`align-content:flex-start` worked for me to reset the default `stretch`. — Ben Racicot, Aug 07 '18 at 13:51

score 16 · Accepted Answer · answered Jul 25 '17 at 12:22

You just need to set align-items: flex-start on parent element because default value is 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>

How to make flex child height to wrap content

1 Answers1