use flexbox instead of hardcoding body height

Author: arpith

src/app/components/HomePage.jsx

@@ -3,12 +3,13 @@ import Streams from './Streams';
 import Messages from './Messages';
 import Users from './Users';
 import Header from './Header';
+import wrapper from '../styles/homePage';
 import body from '../styles/body';
 
 class HomePage extends React.Component {
   render() {
     return (
-      <div>
+      <div style={wrapper}>
         <Header />
         <div style={body}>
           <Streams />

src/app/styles/body.js

@@ -1,6 +1,3 @@
-import { headerHeight } from './dimensions';
-
 export default {
   display: 'flex',
-  height: window.innerHeight - headerHeight,
 };

src/app/styles/header.js

@@ -2,6 +2,7 @@ import { headerHeight } from './dimensions';
 
 export default {
   display: 'flex',
-  height: headerHeight,
-  height: 40
+  flexGrow: 0,
+  flexShrink: 0,
+  flexBasis: headerHeight,
 };

src/app/styles/homePage.js

@@ -0,0 +1,5 @@
+export default {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+};