There are a lot of examples explaining how to get a flexbox child 100% the height of it's parent but when I add multiple column the various strategies don't work.

The code below ends up stacking the boxes on top of each other, they should be side by side.

[https://jsfiddle.net/pqmv4pc4/](http://jsfiddle.net/pqmv4pc4/)

```css
#snippet-container {
      height: 300px;
      width: 200px;
    }

    #page {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    #content {
      display: flex;
      height: 100%;
      background: blue;
      width:50%;
    }

    #content .test {
      width: 100%;
      height: 100%;
      background: yellow;
      border: 2px solid red;
    }
```

```html
<div id="snippet-container">
          <div id="page">

            <div id="content">
              <div class="test"></div>
            </div>

             <div id="content">
              <div class="test"></div>
            </div>

          </div>
    </div>
```