title: Flex with absolute positioning does not work in safari
body: <p>I am trying to make a text slider with flexbox.</p>
  
  <p>I want all the child element under the question div to be collapsed like the one you seeing in the chrome.</p>
  
  <p>In the real code, inactive element will be set to translateX(100%) and  active index element to 0%.</p>
  
  <p>The reason why I want to use flexbox is that <strong>Ques*:</strong> should be aligned with first line of the question text and <strong>text-container div</strong> should be center of the <strong>question div</strong> no matter what length is the <strong>q-text div</strong>.
  ( Tried without flex but I could not align <strong>Quest*</strong> and <strong>first line of</strong> text )</p>
  
  <p>Like the sample code, it has different center position due to text length difference. </p>
  
  <p>In the Chrome it works fine. <strong>However, it is not centered in Safari</strong> ( using latest version of Safari ).</p>
  
  <p>If there is better way to achieve this, I am happy to see ! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    width: 100%;
    height: 200px;
    background: black;
  }
  
  .question {
    display: -webkit-flex;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
  }
  
  .text-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    position: absolute;
    color: white
  }
  
  .q {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    align-self: baseline;
  }
  .q-text {
    width: 75%;
    padding-right: 12%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
    &lt;body&gt;
  
      &lt;div id="container"&gt;
        &lt;div class="question"&gt;
          
          &lt;div class="text-container"&gt;
            &lt;div class="q"&gt;
              Qest1:
            &lt;/div&gt;
            &lt;div class="q-text"&gt;
              1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
            &lt;/div&gt;
  
          &lt;/div&gt;
           &lt;div class="text-container"&gt;
            &lt;div class="q"&gt;
              Qest2:
            &lt;/div&gt;
            &lt;div class="q-text"&gt;
              2Lorem Ipsum is simply dummy text of the printing and ty
            &lt;/div&gt;
  
          &lt;/div&gt;
           &lt;div class="text-container"&gt;
            &lt;div class="q"&gt;
              Qest3:
            &lt;/div&gt;
            &lt;div class="q-text"&gt;
              3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
            &lt;/div&gt;
  
          &lt;/div&gt;
          
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/2nw7g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2nw7g.png" alt="text 1"></a></p>
  
  <p><a href="https://i.stack.imgur.com/O0GQd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O0GQd.png" alt="text 2"></a></p>