html - Flexbox如何让子元素填充高度

Question

我有一个 jsfiddle这里的例子。我想要做的是让右侧 .inside-right 填充 .right 的高度。你可以看到黑色背景只占据了顶部的一小块空间。我已经尝试了各种高度 100%、auto，但似乎无法完全填满。任何建议都会很棒!

    .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;
     }
 

<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>

Answer 1

另一种方法是制作 .right display: flex 并且默认情况下， child (或 child ，在这种情况下)将拉伸(stretch)填充父级的高度。

    .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;
        display: flex;
    }
 
    .top, .bottom {
        display: block;
        height: 4px;
        background: red;
    }
    
    .inside-right {
      background: black;
      width: 4px;
     }
 

<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>