フレックスアイテムの子供たちを同じ高さにします

Question

フレックスにはまだまだ足りません。まだ初心者で、多分私の問題を抱えています。私は、他の要素がフレックスを使用しているメインの要素を持っているので、1行で2または3のようになります。私はフレックスと同じ高さでそれらをすべて作ることができますが、これはクールですが、私はこれらのフレックス要素の子供たちも同じ高さにする必要があります。十分な文章は、例を見てみましょう。jsFiddle

ご覧のとおり、これらの「赤い」要素を同じ高さにしたいと思います。ここに私のスタイルのシンプルなSCSSの例があります：

.main { 
    display: flex; 
    background: lightblue; 

    .left, .right { 
     flex: 1; 
     margin: 15px; 
     background: rgba(white,0.5); 

     .content { 
      padding: 15px; 

      .inner { 
       padding: 10px; 
       background: rgba(red,0.3) 
      } 
     } 
    } 
} 

Answer 1

コメントに記載されているように、子要素の高さを等しくすることはできません。

.main { 
 
    display: flex; 
 
    background: lightblue; 
 
} 
 
.left, .right { 
 
    flex: 1; 
 
    margin: 15px; 
 
    border: 15px solid rgba(255,255,255,0.5); 
 
    background: rgba(255,0,0,0.3); 
 
    background-clip: padding-box; 
 

 
}   
 
.inner { 
 
    padding: 10px; 
 

 
}

<div class="main"> 
 
    <div class="left"> 
 
     <div class="content"> 
 
      <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales. Morbi id libero nisi. Nam tellus lacus, efficitur in ultrices vel, tincidunt ac nunc. Mauris egestas ligula eget leo iaculis pellentesque. Aliquam varius ante sapien, ultricies scelerisque est sagittis sed. Mauris rutrum rhoncus tristique. 
 

 
Aliquam accumsan sem sed mollis ullamcorper. Vestibulum eros ante, elementum vitae nulla non, porta placerat justo. Phasellus at condimentum magna, eu pharetra nibh. Aenean tincidunt, nibh a rutrum fringilla, dolor velit sagittis orci, ut pulvinar dui nisl vitae mauris. Vestibulum fringilla, orci eget dapibus posuere, urna arcu dictum nisl, a scelerisque nisi orci in quam. Proin suscipit libero turpis, nec mollis orci mattis at. Nam ultrices lorem non ex fringilla ultrices. Nulla mattis dapibus nisl non sagittis. Phasellus accumsan nunc ipsum, non mollis ante viverra id. Praesent vel purus et nibh tempor vestibulum sed eu tortor. Curabitur ut congue sem.</div> 
 
     </div> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="content"> 
 
      <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales.</div> 
 
     </div> 
 
    </div> 
 
</div>

これは視覚的等しい高さのためだけのソリューションです。しかし、あなたの特定のケースのための回避策があります。あなたが実際に何を目指しているかによっては、これは適切でないかもしれません。