Is there a way to make the height of the parent column dependent upon the height of the child column-CodePudding

I'm pretty new to coding and I know very little, so I apologize if the answer to this question is very simple, but I scoured the internet for hours and came up with nothing. So, I have a very basic column set up, ie, something along the lines of:

<div class="row">
  <div class="col-6 col-sm-3">CONTENT
     <div class="row">
     <div class="col-6 col-sm-3">CONTENT</div>
     <div class="col-6 col-sm-3">CONTENT</div>
     </div>
  </div>
  <div class="col-6 col-sm-3">CONTENT</div>
</div>

Where I have a row of two primary columns and two additional columns in the leftmost of the two primary columns. The height of the rightmost primary column is dependent upon the height of the content in the leftmost primary column and scales in size with said column, which I believe that is how it usually works. But for the secondary columns inside the primary leftmost column, I need the height of the leftmost secondary column to scale with the height of the content in the rightmost secondary column. In visual terms: Example.

I know I could simply set a height for the content of that column, but the issue is that the content on the page is fluid, so on different size screens, it doesn't always match up. Is there a way to do this? Thanks!

CodePudding user response：

Looks like your layout is reverse. Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want two equal-width columns across, you can use .col-6. You can use this code:

<div class="row">
  <div class="col-md-6 col-12">CONTENT
      <div class="row">
      <div class="col-md-6 col-12">CONTENT</div>
      <div class="col-md-6 col-12">CONTENT</div>
      </div>
  </div>
  <div class="col-md-6 col-12">CONTENT</div>
</div>

CodePudding user response：

If you want two equal-width columns across. You can use this code

.bg-p{
background:#b8b8b8;
width:100%;
padding:1rem;
}
.bg-c{
background:#939393;
width:100%;
padding:1rem;
min-height:150px;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <title>Demo</title>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-6">
        <div class="bg-p">P1
          <div class="row">
            <div class="col-sm-6">
              <div class="bg-c">S1</div>
              </div>
             <div class="col-sm-6">
              <div class="bg-c">S2</div>
              </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 d-flex">
        <div class="bg-p">P2
        </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

  </body>
</html>