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">
		<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>