How to make Row track Divs height with d-block

Question

I have the following structure of a mosaic

.row > div {border:10px solid white}
.B {background:blue; height:700px}
.G {background:green; height:350px}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid px-5">
    <div class="row d-block">
        <div class="col-md-8 col-lg-6 float-left B"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
    </div>
</div>

But the container-fluid nor the row accompany the size of the Divs inside I have to set the size in css?

Obs: see in full screen.

Answer 1

No accompaniment because you used the class float-left in the children, to solve this you have to make a clearfix in row. Here in Bootstrap’s own documentation has this described. https://getbootstrap.com/docs/4.0/utilities/clearfix/

Follow your code, notice I put an edge on the row for you see that now she respects the height of children, for now she has the class clearfix

.row > div {border:10px solid white}
.B {background:blue; height:700px}
.G {background:green; height:350px} 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid px-5">
    <div class="row d-block clearfix border">
        <div class="col-md-8 col-lg-6 float-left B"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
        <div class="col-md-4 col-lg-3 float-left G"></div>
    </div>
</div>