Web design layout issues (Material Design, AngularJS, Flexbox, etc...)
<p>I am trying to find out why a responsive site works in Chrome but not in Firefox. We are using AngularJS, Material Design, Flexbox and other technologies. We have the following pages that works perfect in chrome but looks differently in Firefox. I don't know if the issue has to do with using "flexboxes".</p>

<p>The index.html is:</p>

<p>index.html == All required files are included perfectly</p>

<pre><code>&lt;body style="background:#B2DFDB;  font-family: 'Amatic SC', cursive;
  font-weight: 700;" flex layout layout-align="center start" ng-controller="DynamicModelController"&gt;
    &lt;md-card flex="100" flex-gt-sm="70" layout="column"&gt;
        &lt;md-toolbar&gt;
            &lt;div class="md-toolbar-tools"&gt;
                &lt;span flex layout="row" layout-align="center center"&gt;
                    &lt;h4 ng-model="toolBarTitle.menuTitle" ng-model-options="{ getterSetter: true }"&gt;
                        {{menuTitle}}
                    &lt;/h4&gt;
                &lt;/span&gt;

            &lt;/div&gt;
        &lt;/md-toolbar&gt;


        &lt;!--ng-view layout="row" layout-align="start end" teal/--&gt;

        &lt;div ui-view style="border:solid 2px red;  "&gt;
            &lt;!-- hierin worden de pagina's geladen --&gt;
        &lt;/div&gt;    
    &lt;/md-card&gt;
&lt;/body&gt;
</code></pre>

<p>Our app.js file uses the angular UI-View router to load pages into the <code>&lt;div ui-view" ...&gt;&lt;/div&gt;</code> in the <strong>index.html</strong>. There is no problem with the UI-View. The only problem we have is that the pages looks good in Chrome but not in Firefox.</p>

<p>The page that is loaded into the UI view is </p>

<p>sand.html</p>

<pre><code>&lt;md-content flex layout="column" layout-padding style="background-color:#B2DFDB"&gt;   

    &lt;div layout flex layout-align="center center" class="md-padding-20"&gt;
        &lt;md-input-container flex&gt;
            &lt;input type="text" ng-model="sandwichName" ng-change="filterSandwich()" placeholder="Search here..." /&gt;
        &lt;/md-input-container&gt;

        &lt;span style="position:relative;top:2px"ng-show="totalItems &gt; 0"&gt;
           &lt;md-button  ui-sref="checkout"  class="md-fab" style="background:teal;"
           ng-click="saveCartToSession()"&gt;
            &lt;i class="material-icons" style="line-height:inherit;"&gt;shopping_cart&lt;/i&gt;

        &lt;/md-button&gt;&lt;/span&gt;
        &lt;label ng-hide="totalItems == 0"&gt;&lt;b&gt;{{totPrice}}€&lt;/b&gt;&lt;/label&gt;
    &lt;/div&gt;

    &lt;md-grid-list class="gridListdemoBasicUsage"
                  md-cols-xs="2" md-cols-sm="3" md-cols-md="3" md-cols-gt-md="4"
                  md-row-height-gt-md="1:1" md-row-height="2:2"
                  md-gutter="12px" md-gutter-gt-sm="8px" style="background-color:#B2DFDB" &gt;
        &lt;md-grid-tile ng-repeat="sandwich in workingCopy.sandwiches" class="green" ng-click="addItemToCart(sandwich)"&gt;


            &lt;md-grid-tile-footer flex&gt;
                &lt;div layout="row" flex&gt;
                    &lt;span style="font-size: large;font-weight: bold;margin-left:15px;"&gt;{{sandwich.Name}}&lt;/span&gt;
                    &lt;span style="padding:10px;"&gt;&lt;/span&gt;
                    &lt;span style="font-size: large;font-weight: bold;margin-left:45px;"&gt;{{sandwich.Price}}&amp;#8364;&lt;/span&gt;
                &lt;/div&gt;
            &lt;/md-grid-tile-footer&gt;
            &lt;img class="san" src="{{sandwich.ImageUrl}}"&gt;
        &lt;/md-grid-tile&gt;
    &lt;/md-grid-list&gt;
&lt;/md-content&gt;
</code></pre>

<p>When this page is loaded into the <code>&lt;div ui-view&gt;</code> in the index.html, it looks perfect in Chrome. Here is the screenshot in <a href="http://postimg.org/image/a1ki1mdor/" rel="nofollow noreferrer">Chrome</a> but looks differently in Firefox, here is the <a href="http://postimg.org/image/jsrxltosr/" rel="nofollow noreferrer">Firefox</a> screenshot.</p>

<p>In the Firefox you can see that the <code>&lt;div ui-view&gt;&lt;/div&gt;</code> inside the <strong>index.html</strong> never expanded to contain the sand.html page like in Chrome.</p>

<p>I don't know if the problem has to do with the flexboxes or what.</p>