Make elements same height with Angular Material + Flex

Question

I have an app I'm building that has a basic layout with a page header, a sidebar, and a main content area. I'm using Angular Material (1.0.5) with Angular.js (1.5.0). I'm using Angular Material's flexbox layout directives for my application's layout.

My problem is that I'm using flex to extend the sidebar to the bottom of the page, but when I scroll on a page with many ng-repeated items, it stays the height of the window. I would like it to extend all the way to the bottom of the page itself, as far as the repeated items goes. I've tried several different ways using Angular Material's flex directives, however this is the best I've been able to do thus far. One option I could do that I'd like to avoid is to calculate the height it needs to be using JavaScript in a $timeout, but like I said, that would be my last choice. Another option I know is available is to make the content area scrollable so that the header and sidebar are always fixed there. I would do that, but the client dislikes that and said no. (hence, not an option)

I've put together a CodePen to reproduce the issue I'm having. This has got my layout pretty much identical to what my app has got for its layout at the moment.

alephao alephao · Accepted Answer · 2016-04-28T01:43:07

Firs create a wrapper class and insert all the content inside the wrapper

.wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

<body ng-app="my-app" layout="column">
    <div class="wrapper" layout="column">
       ADD ALL YOUR CONTENT HERE
    </div>
</body>

And for your rows / header not to shrink, add flex-shrink: 0 to them

.header,
.row-item {
    flex-shrink: 0;
}

Result:

http://codepen.io/retamalph/pen/GZYZJo?editors=1100

Make elements same height with Angular Material + Flex

1 Answers

Result: