I am setting the height of the parent container to 70% and inside that I am using two divs but when giving both child div height 100% it is taking the height of the whole container not from the parent container which is 70%

i had tried so much solution but not working.
one thing I want to highlight that I am working on jinja file in using weasyprint library to convert HTML to pdf .

here is the HTML code

 <div class="right-content">
            <div class="upper-content d-flex">
              <div class="invoice-qr">
                <div class="qr-img">
                  <!-- <img src="" alt=""> -->
                  qrcode
                </div>
                <div class="bill-no">
                  <p>
                    <strong>E- Way Bill No:</strong> <br /><span
                      >601735889771</span
                    >
                  </p>
                </div>
                <div class="bill-date">
                  <p>
                    <strong>E- Way Bill Date:</strong> <br /><span>
                      07-Jun-2024
                    </span>
                  </p>
                </div>
              </div>
              <div class="eway-bill-qr">
                <div class="eway-qr-img">
                  <!-- <img src="" alt=""> -->
                  qrcode
                </div>
              </div>
            </div>
            <div class="lower-content">
              <div class="irn">
                <p>
                  <strong>IRN:</strong>
                  <span
                    >c40ddf0ee8c2d3a3270b8ed3c0829330125c213123e9b58f2a47a9ad389ec534</span
                  >
                </p>
              </div>
            </div>
          </div>

here is the CSS

      .section-2 .right-content {
        width: 35%;
        border: 1px solid black;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
      }

      .section-2 .right-content .upper-content {
        height: 65%;
        width: 100%;
      }

      .section-2 .right-content .lower-content {
        height: 35%;
        width: 100%;
      }

      .section-2 .right-content .upper-content .invoice-qr {
        width: 45%;
        height: 100%;
      }

      .section-2 .right-content .upper-content .eway-bill-qr {
        width: 55%;
        height: 100%;
      }

      .section-2 .right-content .upper-content .invoice-qr .qr-img {
        height: 60%;
        border-bottom: 1px solid black;
      }

      .section-2 .right-content .upper-content .invoice-qr .bill-no {
        border-bottom: 1px solid black;
        height: 20%;
      }

      .section-2 .right-content .invoice-qr .bill-date {
        border-bottom: 1px solid black;
        height: 20%;
      }

      .section-2 .right-content .eway-bill-qr {
        height: 100%;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
      }