html - How to get a tight div when heights differ? -

this question has answer here:

i have series of div aligned in row flexbox. heights differ , largest 1 sets common height div. example given in jsfiddle:

html:

<div>   <div class="big">     hello   </div>   <div>     bonjour   </div> </div>

css:

div {   display: flex;   flex-direction: row;   border-color: gray;   border-style: solid;   border-width: 5px; }  .big {   height: 100px; }

the box "hello" set 100px , natural height of 1 "bonjour" smaller. inherits height of bigger neighbour.

how can have heights driven contents rather maximum size of divs within series of boxes aligned next each others?

just use align-items: flex-start; parent div.

div {   display: flex;   flex-direction: row;   border-color: gray;   border-style: solid;   border-width: 5px;   align-items: flex-start; // here }

SoEM