CODEWITHSUNDEEP
ioscsssafariflexboxmobile-safari
user6702327
user6702327

Reputation:

Flex box layout in IOS: flex direction column overlapping elements

Flexbox proprieties are working everywhere except in safari mobile on I Os.

We have 3 images, that should use the flexbox layout to be distributed in column direction with space-between propriety.

Page: http://asedis.sp1.netkom.it/?page_id=292

.imgcontrolandmanagmentresizeblablablabl>.vc_column-inner .wpb_wrapper {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -webkit-box-orient: vertical;
  display: -webkit-flex;
  display: -ms-flex;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

As you can see I included all vendor prefixes and tried to apply "-webkit-box-orient: vertical;" to fix the issue, but is not working.

What happens is that on safari mobile you will see the 3 images overlapping each other. And not respecting the behavior they already have in all other browsers (chrome, firefox..).

This happens every single time I use flex box, safari gives me always that problem. If I use flex-direction: column; the flexed children overlap each other.

I searched and tried different ways without success.

Upvotes: 1

Views: 2672

Answers (1)

Usman Iqbal
Usman Iqbal

Reputation: 2429

I encounter the same problem in iphone, the siblings were overlapping, although i used flex : 1 on childs. But when I was using flex-direction : column the siblings was overlapping.

So I solved it by giving minimum height to one sibling and it worked.

Upvotes: 1

Related Questions