Question

在我的布局中，我使用flex来让彼此相邻的2个盒子。一个在左边有很多文字，一个在右边只有一两行。

我正在尝试使右框的内容与左框垂直对齐。

使用flexbox这似乎相当简单，而且大多数情况下都是如此。除了.. Safari是一件事。它同样适用于Chrome和FF，但在野生动物园中，儿童容器的100％高度实际上并不是100％延伸，而是保持在自动状态，所有东西都保持在顶部。

HTML：

<div class="container">
  <div class="col-md-12 simple-container">
    <div class="row">
      <div class="page-left col-sm-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veniam, molestiae natus aliquam voluptatibus recusandae atque sunt incidunt iste aperiam fugiat officiis cumque modi aut, neque doloremque mollitia. Illo, doloremque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quasi veritatis vitae quae dolorem pariatur necessitatibus assumenda nam asperiores dicta, ut cum quibusdam nulla rem! Iste, dignissimos obcaecati. Quod, aliquam.</div>
      <div class="page-right col-sm-6">"You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder"</div>
    </div>
  </div>
</div>

CSS：

.simple-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.simple-container .page-left h2 {
    margin-bottom: 0;
    font-weight: 400;
}

.simple-container .page-left .subtitle {
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 100;
}

.simple-container .page-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.simple-container .page-right h2 {
    font-weight: 400;
    font-style: italic;
}

https://jsfiddle.net/xtvf88hy/13/

我缺少什么样的CSS / Flexbox巫术？我可以通过给.page-right固定高度等于.page-left来“修复”它，但我宁愿不让 hacky。

Safari忽略父Flex容器的100％高度

0 个答案: