jquery - Browsers shrinking web page (except safari) -

i've been working on web page handle orders , deliveries , i've run issue i'm not sure how resolve. page uses jquery collapsible lists & flex box display presented in safari, not in other browser. body shrinks down seems mobile view , regardless of changes made margins or dimensions, stays mobile sized.

i'm using jquery.mobile-1.4.5.min.js structure lists , i've had make few changes css appeal page's layout can't find affecting page's sizing. question causing this? on jquery's side, or css issue?

here template i've been using structure everything

html

<ul id="content-list">           <form name="form1" form method="post" action="/cgi-bin/formmail">             <ul style="margin:auto;">               <ul class="background">                 <div data-role="main" class="ui-content">                 <div data-role="collapsible">                 <h4>items</h4>                 <ul class="flex-container">                     <li class="flex-item">product name</li>                     <li class="flex-item">producer name</li>                     <li class="flex-item">price</li>                     <li class="flex-item"><input type="text" placeholder="amt. here" maxlength="15"></li>                 </ul>                 </div>                 <div data-role="collapsible">                 <h4>more items</h4>                 <div data-role="collapsible">                 <h4>even more items</h4>                 <ul class="flex-container2">                     <li class="flex-item2">longer product name</li>                     <li class="flex-item2">longer producer name</li>                     <li class="flex-item2">price<br>price<br>price</li>                     <li class="flex-item2">                     <div class="input">                         <input type="text" placeholder="amt. here" maxlength="15">                         <input type="text" placeholder="amt. here" maxlength="15">                         <input type="text" placeholder="amt. here"maxlength="15">                     </div>                     </li>                 </ul>                 </div>                 </div> 

css

@mixin flexbox() {     display: -webkit-box;     display: -moz-box;     display: -ms-flexbox;     display: -webkit-flex;     display: flex; }  @mixin flex($values) {   -webkit-box-flex: $values;   -moz-box-flex:  $values;   -webkit-flex:  $values;   -ms-flex:  $values;   flex:  $values; }  @mixin order($val) {   -webkit-box-ordinal-group: $val;     -moz-box-ordinal-group: $val;        -ms-flex-order: $val;        -webkit-order: $val;     order: $val; }  .flex-container {   padding: 0;   margin: 2% 0 4% 0;   list-style: none;   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   -webkit-flex-flow: row wrap;   justify-content: space-between; } ul {     display: flex; } ul:after {     border-bottom: 1px solid black; } .flex-item {   background: white;   padding: 0;   width: 100px;   height: 80px;   margin-top: 10px;   margin: auto;   line-height: 25px;   color: black;   font-weight: normal;   font-size: 1em;   text-align: center; } .input{     width: 75px;     vertical-align: top; } .background{     border: none;      margin: auto;     width:80%;     min-width: 80%;     padding-right: 1cm;     background-color:#009966; } #content-list {     display: flex;     width: 100%;     min-width: 100%;     padding-bottom: 2cm; }   .flex-container2 {   padding: 0;   margin: 2% 0 4% 0;   list-style: none;   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   -webkit-flex-flow: row wrap;   justify-content: space-between; } .flex-item2 {   background: white;   padding: 0;   width: 130px;   height: 120px;   margin-top: 10px;   margin: auto;   line-height: 45px;   color: black;   font-weight: normal;   font-size: 1em;   text-align: center;   } 

in addition, here template w/ resources i'm using: http://jsfiddle.net/tlittler/9ndzm3cc/

i'm not sure whether want safari behave other browsers, or other way round, here's what's causing difference (at least safari < 9):

#content-list {     display: flex; 

if want other browsers behave safari, set block. (fiddle)

if want safari behave other browsers, need add prefixed versions, everywhere else: (fiddle)

display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;