Flexbox如何让子元素填充高度

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加min-height

即可

.inside-right {
  background: black;
  width: 4px;
  min-height:100%;
 }

完整的工作代码：

＆＃13;

＆＃13;

    .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;
			min-height:100%;
     }
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在这里工作jsFiddle

Answer 2

另一种方法是make .right display: flex，默认情况下，子项（或本例中的子项）将stretch填充父项的高度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;