Ausgleichshöhe der Elemente innerhalb der Flexbox-Säulen

Question

Ich habe eine Tabelle mit mehreren Spalten. Diese Spalten können Inhalte unterschiedlicher Größe enthalten, so dass die Höhe variiert.

Was ich tun möchte, ist die Höhe der einzelnen Elemente zu justieren, um es wie dieses Bild aussehen:

.

.table { 
 
    display: flex; 
 
    background-color: #B2EBF2; 
 
    margin: 0 auto; 
 
    width: 900px; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 1 auto; 
 
    width: 33%; 
 
} 
 

 
.box { 
 
    flex: 1 0 auto; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
    border: 1px solid #546E7A; 
 
} 
 

 
.title { 
 
    font-size: 2em; 
 
    text-align: center; 
 
} 
 

 
.description { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
     <div class="table"> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 1 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/320" /> 
 
       </div> 
 
      </div> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 2 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/300" /> 
 
       </div> 
 
      </div> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 3 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/280" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Zuerst sollten Sie Bilder von der gleichen Größe verwenden. Dann entfernen Sie den flex: 1 0 auto; aus der .box, aber gebe flex: 1 0 auto; nur zur Beschreibung. Ich hoffe, es könnte alle Ihre Anforderungen erfüllen.