CSS：Flexの同じ高さの列と垂直方向の中心コンテンツ

Question

私は

SCSS

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> 

揃え垂直途中であることを左と右の列のコンテンツを取得するために苦労しています

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

どのように私はそれを修正し、重要なのはSafariで動作させるとクローム？

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>