Browsers shorten the web page (except for safari)

I am working on a web page to handle orders and shipments and I am facing a problem. I'm not sure how to solve it. This page currently uses jQuery expandable lists and flexbox display, which were well presented in Safari but not in any other browser. The body shrinks to what appears to be mobile, and no matter what changes are made to margins or dimensions, it remains mobile.

I'm currently using jquery.mobile-1.4.5.min.js to structure my lists and I've already had to make a few changes to my CSS to refer to the page layout, but I can't find anything that will affect the page size. My question is, what could be causing this? Is this on the jQuery side, or is it a CSS issue?

Here is the template I used to 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;
  }

      

        
        
        
      

    

Also, here is the template w / resources I'm using: http://jsfiddle.net/TLittler/9ndzm3cc/