The div do not fill up the height of parent div's height

Question

I use the less as the style language. I tried set height to 100% before ask this question, I get fail.

<style scoped rel="stylesheet/less" lang="less">

  @border: 1px solid #dddee1;
  .cal-div {
    margin: 20px 0;
    border: @border;

    .cal-circle {
      display: inline-block;
      vertical-align: middle !important;
    }

    .res-show {
      margin-left: 20px;
      display: inline-block;
      vertical-align: middle !important;
    }

  }

  .discount-items-gather {
    border: @border;

  }
  ...

</style>

This is my html code:

        <Row>
        <Col span="8">
          <div class="cal-div">
            <div class="cal-circle">
              <i-circle :percent="left_percent">
                <span style="font-size:24px">{{ left_percent }}%</span>
              </i-circle>
            </div>

            <div class="res-show">
              ....
            </div>
          </div>
          </Col>

          <Col span="5">
          <div class="cal-test">
            <div>
              .....
            </div>
          </div>
          </Col>

          <Col span="11">
          <div class="discount-items-gather">
            ...
          </div>
          </Col>
        </Row>

and the result is like this:

You can see my snapshot.

This is not my requirement, I want to the height of the border fill the outer div's height.

I tried add the height: 100%;, but do not work for me.

Answer 1

You need to give the parent div a specific height. Only then the css "height:100%" will work for the inside div.