Flex with absolute positioning does not work in safari
<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>