Wie Flex-Kind-Höhe machen, um Inhalt zu wickeln

Question

Was ich im Grunde will, ist, die Höhe jedes Kindelements zu machen, um seinen Inhalt zu wickeln.

Hier ist mein 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> 

Ausgang:

Erwartete Ausgabe:

Answer 1

Sie müssen nur align-items: flex-start auf übergeordnetes Element setzen, da Standardwert stretch ist.

.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>