html – How to stop vertical flow.

Consider this scenario:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css" rel="stylesheet"/>
<div style="height: 200px; border-bottom: 1px solid black;">
  <div class="row h-100 px-5">
    <div class="col-12">
      <div class="row">header</div>

      <div class="row h-100" style="border-bottom: 1px solid red;">
        <div class="col-12">
          <div class="row h-100">
            <div class="col-4">
              <div class="row h-100">
                left
              </div>
            </div>
            <div class="col-8">
              <div class="row h-100">
                right
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
 </div

The height of the container at the top is fixed. I would like to create two “rows”, the first for the header and the second for the content. I also want the row of contents to be 100% higher than the container above, I mean fill the rest of the space vertically. My problem is that the content line is overflowing. Btw I used Bootstrap 4 classes.

Write a Comment

Your email address will not be published. Required fields are marked *