Material: layout="column" : Columns overlaps each other on safari

[GautierT]

On Safari 8.0.6 very weird comportement of classic layout="row" layout-sm="column"

http://codepen.io/GautierThiriez/pen/BNYzed?editors=101

[kruny1001]

<div ng-controller="AppCtrl" ng-app="MyApp">

<div layout="row" layout-sm="column">
  <div flex>
    I flex to one-third of the space on mobile, and two-thirds on other devices.
  </div>
  <div  flex-gt-sm="66">
    I flex to two-thirds of the space on mobile, and one-third on other devices.
  </div>
</div>

Try this way

[chaitu87]

Faced the same issue.. Fixed it with


[layout-sm=column] {
display: block;
}


[ThomasBurleson]

You must set an explicit height

md-content div:first-child {  height: 400px; }

on

<div ng-controller="AppCtrl" ng-app="MyApp">
  <md-content >
    <div layout="row" layout-sm="column">      
      <div flex="75" flex-sm="33">
        I flex to one-third of the space on mobile, and two-thirds on other devices.
      </div>
      <div flex="25" flex-sm="66">
        I flex to two-thirds of the space on mobile, and one-third on other devices.
      </div>
    </div>
  </md-content>
</div>

Here is a CodePen Demo with

• layouts working properly,
• using SCSS with nested style specifications
• using media query transitions of flexbox layouts

[ThomasBurleson]

Fixed in SHA e8b60de997fc06e1471d9e30a2e0f300bc18869f

[ThomasBurleson]

@robertmesserle - am i missing anything with my CodePen? Can you see any way to avoid explicitly setting the height of the mdContent?

[robertmesserle]

If your container doesn't have a fixed height, why would you want to use flexbox at all for stacking elements? I'm not sure what the expected outcome is.

[ThomasBurleson]

Here is a working solution using ngMaterial Layouts (with flexbox) and media transitions:

<md-content layout="row" layout-sm="column">
   <div flex-sm="34" flex="75" class="md-whiteframe-z2">
   <div class="desktop overlay">
     <span>flex=75</span>
     <br><br> 
     Three-fourths (3/4) viewport size on larger devices. 
   </div>
   <div class="mobile overlay">
     <span>flex-sm=34</span>
     <br><br> 
     One-third (1/3) viewport size on mobile 
   </div>
   </div>

   <div flex-sm="66" flex="25" class="md-whiteframe-z2">
   <div class="desktop overlay">
     <span>flex=25:</span>
     <br/><br/> 
     One-fourth (1/4) viewport size on larger devices. 
   </div>  
   <div class="mobile overlay">
     <span>flex-sm=66:</span>
     <br/><br/> 
     Two-thirds (2/3) viewport size on mobile 
   </div>
   </div>
</md-content>

Live with Source on CodePen Demo

[jdmorales92]

There's here is explained that happens.

1. Min and max size declarations are ignored when wrapping flex items
   https://github.com/philipwalton/flexbugs#flexbugs