Overlapping CSS Flexbox Items in Safari

Overlapping CSS flexbox items in Safari

The element is shrinking. You need to set the flex-shrink property to 0 on the shrinking element.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}

Adjacent divs containing spans overlap when parent div is styled with flexbox in Safari only

Once I figured out this was a bug in Safari only, the answer was a bit easier to come by. I have no clue why this works (thanks Safari), but applying flex 1 0 auto to the first-child of .hshow fixes the issue.

In Stylus/CSS...

.hshow
  display flex

  >div:first-child
    flex 1 0 auto

Result:

CSS Item Overlap on Safari

It's a strange one but I have found if I specify a left value for the back_container and use a transform I am able to position as expected:

.back_container{
display: flex;
position: absolute;
z-index: 2100;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 100px;
justify-content: center;
left: 50%;
transform: translateX(-100px);
}

The left value centers the back button (on top of the play button) and the transform moves it back the desired 100px.
I personally would have made a container that was a the desired width for the controls and aligned them with flexbox or grid (perhaps flex with justified space between) and then centered the play container but the above code should be a quick fix.

Text overlapping in flexbox layout on IE11 and Safari

In terms of Safari...

Although Safari 9 supports all standard flex properties, Safari 8 and older require vendor prefixes.

For a quick way to add all the prefixes you need use Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox

How to stop divs from overlapping in safari

As @DaFois commented, it was enough to remove the table layout and use loose paragraphs in flexbox.

Here the new code:

.show-wrapper {  display: flex;  flex-direction: row;  flex-wrap: nowrap;  align-items: center;  justify-content: space-evenly;}.expect-offer-wrap {  display: flex;  flex-direction: row;}.expectation {  text-align: right;  padding-right: 0.5em;}.offer {  padding-left: 0.5em;  margin-top: 3rem;  margin-left: 2rem;}

<div class="show-wrapper">
  <div class="expect-offer-wrap">
    <div class="expectation">      <h1> {{ page.expectation_title_en }} </h1>
      <p>{{ page.expectation_1_en | markdownify }}</p>
      <p>{{ page.expectation_2_en | markdownify }}</p>
      <p>{{ page.expectation_3_en | markdownify }}</p>    </div>
    <div class="offer">      <h1>{{ page.offer_title_en }}</h1>
      <p>{{ page.offer_1_en | markdownify }}</p>
      <p >{{ page.offer_2_en | markdownify }}</p>
      <p >{{ page.offer_3_en | markdownify }}</p>    </div>
  </div>

    <div class="img-show-wrap">      <img class="img-show" src="{{ page.image | relative_url }}" alt="Sample Image">    </div></div>
</div>

---

Related Topics