Flex-Box 100Vh Stretches Behind Mobile Safari Chrome - Are There Any Known Tricks or Solutions

flex-wrap with with 100% viewport width items do not come up at 100% on chrome mobile simulator

[EDITED]

Viewport for mobile devices did work for me:

<meta name="viewport" content="width=device-width, initial-scale=1">

https://codepen.io/fabiozanchi/pen/aYrmwa

Vuejs: 100vh on mobile browsers

Yes, I had similar issues using vh. It's a known problem.

My suggestion for you is to stop using vh on mobile and tablets in order to avoid these kind of hacks around. Use classic relative % (percentage) values instead. Since I've replaced vh with % I have no such problems on mobiles but it requires a bit more implementation effort. Using % isn't straightforward in all cases, but it pays you back since you've got a solution which works pretty everywhere in the same predictable way.

flex:1 taking only the 100vh height on safari browser instead of full content height

Please try this. And let me know if it helped.

.page_right only needs overflow auto, because inside of it you have only one element which is .content

.page .page_right {
  /* -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; */
  overflow: auto;
}

.content I've added min-height: 100%; to set height for content of the whole page when we've not enough content. I've also removed width: 100% because by default content will take the whole space left

.page_right .content {
  /* -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox; */
  display: flex;
  min-height: 100%;
}

.content_left this is optional, but I think in this div content may flow in default flow without flex.

.page_right .content .content_left {
  /* -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; */
  background: yellow;
}

* {  box-sizing: border-box;}
html,body {  margin: 0;  padding: 0;  height: 100%;  width: 100%;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.root {  height: 100%;  width: 100%;}
.page {  height: 100%;  width: 100%;  display: flex;}
.page .page_left {  min-width: 100px;  background: black;  height: 100%;}
.page .page_right {  overflow-y: auto;}
.page_right .content {  display: flex;  min-height: 100%;}
.page_right .content .content_left {  background: yellow;}
.page_right .content .content_right {  min-width: 200px;  background: orange;}

<div class="root">  <div class="page">    <div class="page_left"></div>    <div class="page_right">      <div class="content">        <div class="content_left">          <p>            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br            /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>          <p>            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br            /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>
          <p>            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br            /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>          <p>            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br            /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>
          <p>            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br            /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>
        </div>        <div class="content_right"></div>      </div>    </div>  </div></div>

Is there a way to add margin-bottom only for safari browsers for mobile devices?

Yes! You can used browser specific calls in your style sheet like this:

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    selector { 
        property:value; 
    }
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    selector { 
        property:value; 
    }
}}

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
    selector { 
        property:value;
    }
}}

Learn more about Browser-Specific CSS here:

https://dev.to/krantikr/browser-specific-css-for-internet-explorer-firefox-chrome-safari-and-edge-394p#safari

---

Related Topics