html - 内部 div 不会扩展到父级的高度

Question

如果我的问题与 StackOverflow 上发布的其他问题相似，我深表歉意。类似的问题似乎都没有解决我的特殊情况。

我在一个父 div 中有两个子 div。 child-div-2 具有固定高度，这定义了父 div 的高度。

如何使 Child-Div-1 的大小与 Child-div-2 和父 div 的高度一致？

这是我创建的一个 JSFiddle 来演示这种情况: https://jsfiddle.net/xandercrewz/hb7yvjw0/

我希望橙色容器自动调整大小，使其高度与绿色和红色容器相同。

谢谢。

<div class='outer-container-blue'>
  <div class='inner-container-left-orange'>
    inner left
  </div>

  <div class='inner-container-right-red'>
    <div class='inner-container-right-green'>

      <div class='inner-container-right-child'>
        inner1
      </div>
      <div class='inner-container-right-child'>
        inner2
      </div>
      <div class='inner-container-right-child'>
        inner3
      </div>

    </div>
  </div>

</div>

CSS:

  .outer-container-blue {
    width: 800px;
    height: auto;
    background-color: blue;
  }
  .inner-container-left-orange {
    display: inline-block;
    float:left;
    width: 15%;
    background-color: orange;

    /* I would like the orange container to be automatically sized so that  */
    /* it's height is the same as the green and red containers.  */
    height: auto;
  }
  .inner-container-right-red {
    position: relative;
    display: inline-block;
    float:left;
    width: calc(100% - 120px);
    height: auto;
    background-color: red;
  }
  .inner-container-right-green {
    position: relative;
    display: inline-block;
    height: auto;
    background-color: green;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
  .inner-container-right-child {
    display: inline-block;
    width: 100px;
    height: 25px;
    margin: 10px;
    background-color: yellow;
    border: 5px solid black;
  }

Answer 1

您可以在外部容器上设置高度(55px 对我有用)。然后将内部容器的高度设置为 100%。