Сделайте детей из гибких предметов одинаковой высоты

Question

Ну, я не очень хорош с flex, все еще новичок, и, возможно, именно поэтому я застрял в своей проблеме. У меня есть основной элемент, в котором другие элементы используют flex, поэтому они могут быть похожими на 2 или 3 в одной строке. Я могу сделать их всех с одинаковой высотой с помощью flex, что здорово, но мне нужно сделать таких же четных детей из этих гибких элементов. Достаточно писать, давайте посмотрим на пример в 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>

Это просто решение для визуальных равных высот. В зависимости от того, на что вы на самом деле нацелились, это может оказаться неприемлемым.