I have a [jsfiddle](https://jsfiddle.net/zvdvd067/) example here. What I'm trying to do is have the right side `.inside-right` fill the height of `.right`. You can see the black background is only taking up a small space at the top. I've tried various heights `100%`, `auto`, but can't seem to get it to fill all the way. Any suggestions would be great!

```css
    .container {
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: row;
    }

    .container > .field {
        width: 100%;
        background: #dddd88;
        order: 2;
    }

    .container > .left {
        width: 4px;
        background: #ccccff;
        order: 1;
    }

    .container > .right {
        width: 4px;
        background: #ccccff;
        order: 3;
    }

    .top, .bottom {
        display: block;
        height: 4px;
        background: red;
    }

    .inside-right {
      background: black;
      width: 4px;
     }

```

```html
<div class="top"></div>
<div class="container">
  <div class="field">
    Main Body
    <br><br><br>
  </div>
  <div class="left"></div>
  <div class="right">
      <div class="inside-right">
        -
      </div>
    </div>
  </div>
</div>
<div class="bottom"></div>

<span></span>
```