0

In my layout i'm using flex to get 2 boxes right next to each other. One on the left with a lot of text, and one on the right with just a line or two.

I'm trying to make the content of the right box align vertically with the left box.

This would seem fairly trivial using flexbox, and for the most part it is. Except.. Safari is a thing. It works in both Chrome and FF just as excepted, but in safari the 100% height of the child-container doesn't actually stretch 100% but stays at auto making everything stay in the top.

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/

What kind of CSS/Flexbox sorcery am i missing? I can "fix" it by giving .page-right a fixed height equal to .page-left but i'd rather not get that hacky.

Jacob K
  • 408
  • 1
  • 5
  • 16
  • Setting position relative on the parent and position absolute + left 41.66666667%; (page-left is 5/12) did the trick, but does it make me feel warm and fuzzy inside? Not even the slightest. – Jacob K Nov 24 '16 at 14:34
  • There are several methods for resolving this problem in the dupe's accepted answer. CSS positioning was just one. Try another method which may be cleaner and more natural. – Michael Benjamin Nov 24 '16 at 15:27
  • I'm afraid it's the only that actually "solves" my problem as the other isn't working for me. They're pretty much just things i've already tried: multiple combinations of nested flex, weird flex-properties. Nothing. I guess i just can't wrap my head around all of the heights and how safari/webkit handles it. – Jacob K Nov 24 '16 at 21:36

0 Answers0