CODEWITHSUNDEEP
cssangularjsflexboxangular-material
JBCP
JBCP

Reputation: 13475

Angular Material layout nested flex rows inside of flex columns do not divide space as expected

I am trying to layout my window so that the outer div fills the height of the window. It should be divided into two columns: 65% on the left and 35% on the right. The right column should be divided into three rows: the top one is flexible, the middle one should be 15% and the bottom one should be 20%.

The odd thing is that the outer column configuration works fine (the 65/35 split) but the vertical splits are not working as expected.

I am testing in Chrome and only need to support Chrome.

Here is the HTML I thought should work:

<div layout="row" flex ng-app="sandbox">
    <div layout="column" flex="65">
        flex-65
    </div>
    <div layout="column">
        <div layout="row" flex>
            flex
        </div>
        <div layout="row" flex="15">
            flex-15
        </div>
        <div layout="row" flex="20">
            flex-20
        </div>
    </div>
</div>

And here is a plnkr:

http://plnkr.co/edit/XWNfOVHvCoBwVeE2krdK

Upvotes: 1

Views: 3373

Answers (1)

Oriol
Oriol

Reputation: 288000

Chrome doesn't calculate vertical percentages very well in Flexbox. So remove the following and let the default align-self: stretch do its magic.

.layout-fill {
  height: 100%; /* Remove this and use `auto` instead */
}

For the inner elements, you use a percentage flex-basis, which is buggy too on Chrome. Better use a 0 flex-basis and distribute the available space using flex-grow factors:

.layout-column > .flex    { flex: 65; }
.layout-column > .flex-15 { flex: 15; }
.layout-column > .flex-20 { flex: 20; }

Fixed Plunker

Upvotes: 2

Related Questions