Question

尝试使用flexbox制作div（绿色）以填充其父级的剩余垂直空间（红色）。我做错了什么或者没有得到它。谁能检查一下吗？ JSFiddle

到目前为止我的代码：

    <div id="container">
      <div id="left-col">
        <div>
        </div>
        <p>Test content</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
        <p>longer</p>
      </div>
      <div id="right-col" class="flexbox">
        <div id="pink">
          <p>I am pink</p>
          <div>
            <div id="yellow">I am yellow</div>
            <div id="green" class="flex">
              <div id="white-border" class="flex-child">
                I have a white border
              </div>
            </div>
          </div>
        </div>


<style>
    #container {
      overflow: hidden;
      width: 100%;
    }

    #left-col {
      float: left;
      width: 50%;
      background-color: orange;
      padding-bottom: 500em;
      margin-bottom: -500em;
    }

    .flexbox {
      float: right;
      width: 50%;
      margin-right: -1px;
      /* Thank you IE */
      border-left: 1px solid black;
      background-color: red;
      padding-bottom: 500em;
      margin-bottom: -500em;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }

    .flex {
      background-color: green;
      -webkit-box-flex: 1;
      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;
      /* OLD - Firefox 19- */
      width: 100%;
      /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;
      /* Chrome */
      -ms-flex: 1;
      /* IE 10 */
      flex: 1;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex-child {
      width: 50%;
      height: 5vw;
      border: 1px solid white;
    }

    #pink {
      background-color: pink;
    }

    #yellow {
      height: 20vw;
      width: 50%;
      background-color: yellow;
    }
</style>

Answer 1

我试图简化一切。

看看以下内容：

.container, .right-col {
display: flex;
}

.left-col,
.right-col,
.right-col-box-3 {
flex-grow:1;
}

.left-col {
background-color: orange;
}

.right-col {
border-left: 1px solid rgb(0,0,0);
background-color: rgb(255,0,0);
flex-direction: column;
}

.right-col-box-1 {
background-color: rgb(255,192,203);
}

.right-col-box-2,
.right-col-box-4 {
width: 50%;
}

.right-col-box-2 {
height: 20vw;
}

.right-col-box-2 {
background-color: rgb(255,255,0);
border: 1px solid rgb(255,255,0);
}

.right-col-box-3 {
background-color: rgb(0,128,0);
}

.right-col-box-4 {
height: 5vw;
border: 1px solid rgb(255,255,255);
}

<div class="container">

<div class="left-col">
<p>Test content</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
<p>longer</p>
</div> <!-- End of .left-col -->

<div class="right-col">

<div class="right-col-box-1">
<p>I am pink</p>
<div class="right-col-box-2"><p>I am yellow</p></div>
</div> <!-- End of .right-col-box-1 -->

<div class="right-col-box-3">
<div class="right-col-box-4"><p>I have a white border</p></div>
</div> <!-- End of .right-col-box-3 -->

</div> <!-- End of .right-col -->

</div> <!-- End of .container -->

Flexbox用于拉伸div高度以填充父div的剩余高度

1 个答案: