Row sizing using flexbox

Question

Trying to use flex-flow: column rather than flex-flow: row, things don't seem to work as expected in Chrome nor Firefox: the boxes simply do not vertically occupy their specified percent size. What might be wrong with this code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

      body {
       font: 24px Helvetica;
       background: #999999;
      }

      #page {
      display: -webkit-flex;
      display:         flex;
      -webkit-flex-flow: column;
              flex-flow: column;  
      }

      #main {
       background: #993333;
       margin: 5px;
       padding: 5px;
       -webkit-flex: 1 1 80%;
               flex: 1 1 80%;
       -webkit-order: 2;
               order: 2;               
       }

      header {
       margin: 4px;
       padding: 5px;
       border: 1px solid #eebb55;
       border-radius: 7pt;
       background: #ffeebb;
       -webkit-flex: 1 1 10%;
               flex: 1 1 10%;
       -webkit-order: 1;
               order: 1;

       }

      footer {
       margin: 4px;
       padding: 5px;
       border: 1px solid #eebb55;
       border-radius: 7pt;
       background: #ffeebb;
       -webkit-flex: 1 1 10%;
               flex: 1 1 10%;
       -webkit-order: 3;
               order: 3;

       }

    </style>
  </head>

  <body>
    <div id='page'>
      <header id="header"></header> 
      <div id='main'>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
      <footer></footer>
    </div>
  </body>
</html>

Change to flex-flow: row and it all works as expected - each column specifies it's designated percent size. But with flex-flow: column rows just occupy miniscule height (and inner text just dangles regardless of the box in Chrome). Any ideas?

Using latest Chrome and Firefox.

Jsfiddle at http://jsfiddle.net/LEtEr/.

possible duplicate of [CSS: Make iframe full with and height, no scrollbars](http://stackoverflow.com/questions/13553324/css-make-iframe-full-with-and-height-no-scrollbars) — cimmanon, Mar 22 '14 at 12:07
I agree I am dense, but this question can be helpful in other ways, even if a solution reuses a principle from another. It's about a flexbox setting and it has fair sample jsfiddles to it. Anyway your comment below kind of leaves this question open. — matanster, Mar 22 '14 at 14:19

score 0 · Answer 1 · answered Mar 26 '14 at 05:04

you need to stretch your flex container (and the body as well) to take 100% of viewport's height

DEMO: http://jsfiddle.net/A7R8A/

the flex container (the one who has display:flex) acts, in its context, like a regular block element if it is placed inside a block element (which is the body in your case)... so as you would do with block elements, you need to set an height to it:

html, body, #page
    {height:100%;......}

(also you don't need to specify order each time, by default it just follows the normal flow of elements)

Row sizing using flexbox

1 Answers1