CODEWITHSUNDEEP
htmlioscssflexbox
MarioD
MarioD

Reputation: 1703

flexbox ios space distribution issues

Take a look at this image:

enter image description here

As you can see the 2 end links break out of the anchor container.

This is only happening on an iPad (using simulator to test).

On the desktop it behaves as it should by breaking the words in the other links allowing for more space to distribute the remaining items.

It's as if ios doesn't know how to properly break the text in the first link.

.nav-section {
  padding: 0 30px;
}
.nav-section__list {
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto;
}
.nav-section__item {
  padding: 0 20px;
}

.nav-section__link {
  display: block;
  background: red;
}
<nav class="nav-section">
  <div class="nav-section__list">

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAA AAAA-AAAAAAAA AAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAA AAAAAAAA AAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAA</a>
    </div>

  </div>
</nav>

Update

enter image description here

enter image description here

This is the same resolution but on a desktop:

enter image description here

As you can see the way the words break is completely different. The iPad just doesn't want to co-operate.

Update 2

I have run into the same issue in another instance of flexbox. It seems like IOS still has some bugs with the implementation.

So I went ahead and used display: table; and display: table-cell; just until the issue is resolved.

If anybody has any other hints as to exactly why the issue might be happening that would be great. Thanks!

Upvotes: 18

Views: 700

Answers (3)

Martinqua
Martinqua

Reputation: 11

In my experience with safari and flexbox it often helps to just add 

display: flex;
flex-shrink: 0;

to the container which is too small. That should guarantee that the container is atleast the size of its contained element.

Upvotes: 0

Sumit patel
Sumit patel

Reputation: 3903

Must specify Width in nav-section__item

.nav-section__item {
  padding: 0 20px;
    word-wrap: break-all;
    width: 20%;
}

Live Demo

Upvotes: 0

Miguel Vieira
Miguel Vieira

Reputation: 154

Flexbox is relatively new, and browsers may have implemented it a little diferently from each other. You may be missing the -webkit-prefix, as it looks like safari did need it on some versions.

display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: stretch;
align-items: stretch;

Or, maybe you could try using:

word-break: break-all;

To ensure that those words will be broken, and will not overflow.

Upvotes: 1

Related Questions