フレックスボックス列内の要素の高さを均等化

Question

私はいくつかの列を持つテーブルを持っています。これらの列には異なるサイズの内容を含めることができ、高さはさまざまです。

：私は何をしたいか

は、この画像のように見えるようにするために、単一の要素の高さを調整することです。

.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

まず、あなたは、同じサイズの画像を使用する必要があります。それから、flexを削除してください：1 0 auto; .boxから、しかしflexを与える：1 0 auto;唯一の記述。 私はそれがあなたのすべての要件を満たすことができることを願っています。