Material: layout: flex-basis bug

Created on 24 Oct 2015 · 11Comments · Source: angular/material

flex-offset and flex have width calculation issue in 1.0.0-rc1

Take a look at this code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>Simple Layout</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet"
        href="./lib/angular-material/angular-material.css"/>
  <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
  <style>
    div.flex, div.flex-25, div.flex-50 {
      border: 1px dotted gray;
      padding: 8px;
      background-color: #90CAF9; /* Blue 200 */
    }

    div.md-layout-column {
      background-color: #FFE0B2; /* Orange 100 */
      text-align: center;
    }
  </style>
</head>
<body ng-app="myApp">
<div layout="row">
  <div flex flex-offset="20">#1 -->20%</div>
</div>
<div layout="row" style="margin-top: 24px;">
  <div flex flex-offset="50">#2 -->50% (25%)</div>
  <div flex>#3 (25%)</div>
</div>
<div layout="row" style="margin-top: 24px;">
  <div flex="25" flex-offset="25">#4 -->25% (25%)</div>
  <div flex="50" flex-offset="20">#5 -->20% (50%)</div>
</div>

<!-- Angular/Material scripts -->
<script src="./lib/angular/angular.js"></script>
<script src="./lib/angular-animate/angular-animate.js"></script>
<script src="./lib/angular-aria/angular-aria.js"></script>
<script src="./lib/angular-material/angular-material.js"></script>

<!-- App-specific scripts -->
<script type="text/javascript">
  angular
      .module('myApp', ['ngMaterial'])
</script>
</body>
</html>

The first two grid is rendered as expected. The third grid worked OK in previous versions (it overflew the right edge of the window and thus displayed a horizontal scrollbar), but it does not work this way with rc1.
When examining in Chrome, offset spacing is calculated properly, but cell widths are not.

0.11.2: Correct

f0314

1.0.0-rc1: Strange

simple_layout_-_google_chrome_2015-10-24_10-19-25

flexbox

Source

Dotneteer

All 11 comments

I've added a CodePen: http://codepen.io/Dotneteer/pen/yYKLgG

Dotneteer on 24 Oct 2015

This is working in v1.0.0-rc5:

screen shot 2015-11-29 at 11 17 21 pm

This is also working in the new Layout engine to be available after the v1.0 release:

screen shot 2015-11-29 at 11 14 34 pm

ThomasBurleson on 30 Nov 2015

Closing as fixed.

ThomasBurleson on 30 Nov 2015

@Dotneteer - See our Layout Collection on the CodePen Angular Material community

ThomasBurleson on 6 Dec 2015

@Dotneteer - As we work on Angular Layouts 2.0, I revisited this issue and realized that you ARE correct; this is indeed a bug.

The following is the appropriate fix for layout="row" with child element flex="30":

flex : 1 1 100%;
max-width: 30%;

The following is the appropriate fix for layout="column" with child element flex="30":

flex : 1 1 100%;
max-height: 30%;

so the flex-basis should be 100% while the max-<XXX> matches the flex value.

ThomasBurleson on 9 Sep 2016

👍1

Safari (mine is 9.1.1 (11601.6.17)) doesn't like this commit. Flex items of parent with .layout-row.layout-wrap now appear in a straight column instead while max-width still apply (illustrated below).

===================== <-- .layout-row.layout-wrap
|---------          |
||flex-50|          |
|---------          |
|---------          |
||flex-50|          |
|---------          |
=====================

lephuongbg on 15 Oct 2016

👍1

@herophuong - please provide a CodePen/Plunkr that demonstrates the issue.

ThomasBurleson on 15 Oct 2016

@ThomasBurleson The documentation page already demonstrates the problem:

screenshot 2016-10-17 luc 12 52 42 ch

lephuongbg on 17 Oct 2016

👍1

@ThomasBurleson Should I create a new issue for this?

lephuongbg on 21 Oct 2016

@herophuong - yes plz.

ThomasBurleson on 29 Oct 2016

@herophuong you didn't link the new issue to this one and I haven't tracked it down, but this is apparently a known bug in Safari: https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items. It's supposed to be fixed in Webkit (https://bugs.webkit.org/show_bug.cgi?id=136041) but isn't in Safari 10.

Thanks to @gkalpak and Michał Gołębiowski for investigating.