flexbox parent div have no height in ios 10 safari but not the case in ios 11 safari

0

<div class="column">

<div class="trainer">

<span>

  hihi

</span>

</div>

</div>



.column {

  display:flex;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:flex;

  height: 100%;

  align-items: center;

  justify-content: space-around;

  flex: 25%;

}

jsfiddle code sample

you can try the above link.
In firefox and ios 11 safari, the parent div background color is shown,
while in ios 10 safari, I cannot see the parent div background color.

So how can I fix the zero height of parent problem in ios 10 safari?

PS. I found that if I change the 25% to 25px, the red background appear in ios 10 safari. Does it mean ios 10 safari doesn't support flex-basis in percentage?

html ios css safari

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

add a comment | 

0

<div class="column">

<div class="trainer">

<span>

  hihi

</span>

</div>

</div>



.column {

  display:flex;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:flex;

  height: 100%;

  align-items: center;

  justify-content: space-around;

  flex: 25%;

}

jsfiddle code sample

you can try the above link.
In firefox and ios 11 safari, the parent div background color is shown,
while in ios 10 safari, I cannot see the parent div background color.

So how can I fix the zero height of parent problem in ios 10 safari?

PS. I found that if I change the 25% to 25px, the red background appear in ios 10 safari. Does it mean ios 10 safari doesn't support flex-basis in percentage?

html ios css safari

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

add a comment | 

0

0

0

<div class="column">

<div class="trainer">

<span>

  hihi

</span>

</div>

</div>



.column {

  display:flex;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:flex;

  height: 100%;

  align-items: center;

  justify-content: space-around;

  flex: 25%;

}

jsfiddle code sample

you can try the above link.
In firefox and ios 11 safari, the parent div background color is shown,
while in ios 10 safari, I cannot see the parent div background color.

So how can I fix the zero height of parent problem in ios 10 safari?

PS. I found that if I change the 25% to 25px, the red background appear in ios 10 safari. Does it mean ios 10 safari doesn't support flex-basis in percentage?

html ios css safari

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

<div class="column">

<div class="trainer">

<span>

  hihi

</span>

</div>

</div>



.column {

  display:flex;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:flex;

  height: 100%;

  align-items: center;

  justify-content: space-around;

  flex: 25%;

}

jsfiddle code sample

you can try the above link.
In firefox and ios 11 safari, the parent div background color is shown,
while in ios 10 safari, I cannot see the parent div background color.

So how can I fix the zero height of parent problem in ios 10 safari?

PS. I found that if I change the 25% to 25px, the red background appear in ios 10 safari. Does it mean ios 10 safari doesn't support flex-basis in percentage?

html ios css safari

html ios css safari

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

share|improve this question

share|improve this question

edited Jan 2 at 7:24

kt_at_kt

edited Jan 2 at 7:24

kt_at_kt

edited Jan 2 at 7:24

kt_at_kt

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

asked Jan 2 at 7:07

kt_at_ktkt_at_kt

374

374

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

0

For Safari 6.1+ , you can use -webkit-flex-basis property.

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002510%2fflexbox-parent-div-have-no-height-in-ios-10-safari-but-not-the-case-in-ios-11-sa%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

For Safari 6.1+ , you can use -webkit-flex-basis property.

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

add a comment | 

0

For Safari 6.1+ , you can use -webkit-flex-basis property.

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

add a comment | 

0

0

0

For Safari 6.1+ , you can use -webkit-flex-basis property.

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

For Safari 6.1+ , you can use -webkit-flex-basis property.

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

.column {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: red;

}



.trainer {

  display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

  height: 100%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  -ms-flex-preferred-size: 25%;

  -webkit-flex-basis: 25%;

  flex-basis: 25%;

}

<div class="column">

  <div class="trainer">

    <span>hihi</span>

  </div>

</div>

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

share|improve this answer

share|improve this answer

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

answered Jan 2 at 8:57

MordecaiMordecai

1,0671212

1,0671212

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002510%2fflexbox-parent-div-have-no-height-in-ios-10-safari-but-not-the-case-in-ios-11-sa%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here