title: How to stop divs from overlapping in safari
body: <p>I have a table with text next to an image put in a flex row. </p>
  
  <p>When I make the window narrower horizontally, the text goes "behind" the image, instead of wrapping and remaining contained by the div. </p>
  
  <p>In chrome and mozilla all is fine, the problem comes only in Safari. </p>
  
  <p>I tried with word-break, overflow-wrap, display block on the image but none helped.</p>
  
  <p>This is my code: <a href="https://codepen.io/matteocarpi/pen/dwzjrb?editors=1100" rel="nofollow noreferrer">https://codepen.io/matteocarpi/pen/dwzjrb?editors=1100</a></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>    .show-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        // margin-bottom: 3rem;
      }
      .expectations {
        text-align: right;
        padding-right: 0.5em;
        vertical-align: baseline;
      }
      .statement {
        vertical-align: bottom;
      }
      .offer {
        padding-left: 0.5em;
      }
      .table-wrap {
        display: flex;
        flex-direction: row;
        padding: 0 2em;
      }
      .offer {
        margin-top: 3rem;
        margin-left: 2rem;
      }
      td {
        vertical-align: baseline;
        // min-width: 540px;
      }
      tr {
        padding: 0;
        margin: 0;
      }
      td &gt; p {
        font-size: 15px;
        font-weight: 400;
        margin: 0.4rem 0;
        word-break: break-all;
        hyphens: auto;
      }
      
      .img-show-wrap {
        display: block;
      }
      .img-show{
        margin-top: -3rem;
        margin-right: 3rem;
        width: 30rem;
        border: solid 3px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="show-wrapper"&gt;
        &lt;div class="table-wrap"&gt;
          &lt;div&gt;
            &lt;table&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td class="expectations"&gt;&lt;h1&gt; {{ page.expectation_title_en 
      }} &lt;/h1&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="expectations"&gt;&lt;p class="statement"&gt;{{ page.expectation_1_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="expectations"&gt;&lt;p class="statement"&gt;{{ page.expectation_2_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="expectations"&gt;&lt;p&gt;{{ page.expectation_3_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
          &lt;/tbody&gt;
        &lt;/table&gt;
  
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;table class="offer"&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td class="statement"&gt;&lt;h1&gt;{{ page.offer_title_en }}&lt;/h1&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="statement"&gt;&lt;p&gt;{{ page.offer_1_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="statement"&gt;&lt;p &gt;{{ page.offer_2_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td class="statement"&gt;&lt;p &gt;{{ page.offer_3_en | markdownify }}&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
      &lt;div class="img-show-wrap"&gt;
        &lt;img class="img-show" src="https://source.unsplash.com/random" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is the actual page: <a href="https://matteocarpi.github.io/crdc/en/the-show" rel="nofollow noreferrer">https://matteocarpi.github.io/crdc/en/the-show</a></p>
  
  <p>I would like the text to wrap and to never overlap with the image (as it works well on codepen's snippet, but not on the actual page in safari)</p>
  
  <p>Thanks in advance for any help!</p>
  
  <p>Matteo</p>