CSS：Flex的高度相等的列和垂直中心內容

Question

我掙扎着爬在左，右列中的內容是垂直方向的中間對齊

https://jsfiddle.net/kLm7j7zq/

<div class="equalizer"> 
    <div class="block1"> 
    <div class="inner"><p> 
    Block 1 
    </p></div> 
    </div> 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</div> 
    <div class="block2"><div class="inner2"><p> 
    Block 2 
    </p></div></div> 
</div> 

SCSS

.equalizer{ 
    display: flex; 
    flex-direction: row; 
    align-content: center; 
    *{ 
    display: flex; 
    background: pink; 
    flex:1; 
    align-content: center; 
    } 
    .block2{background: yellow;} 
} 

如何解決這個問題，並且重要的是讓它在Safari上工作和Chrome？

Answer 1

demo

.equalizer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-content: center; 
 
    background: pink; 
 
    } 
 
    .equalizer * { 
 
    display: flex; 
 
    flex: 1; 
 
    align-content: center; 
 
    } 
 
    .equalizer .block2 { 
 
    background: yellow; 
 
    } 
 
    
 

 
    .block1, .inner2 { 
 
     align-self: center; 
 
    }

<div class="equalizer"> 
 
\t \t <div class="block1"> 
 
\t \t \t <div class="inner"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t Block 1 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim 
 
\t \t \t maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.Lorem ipsum dolor sit amet, consectetur 
 
\t \t \t adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis 
 
\t \t \t id ea dolorum expedita fugit incidunt commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. 
 
\t \t \t Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt 
 
\t \t \t commodi. 
 
\t \t </div> 
 
\t \t <div class="block2"> 
 
\t \t \t <div class="inner2"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t Block 2 
 
\t \t \t \t </p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>