I have a little non-conventional DIV in this design as shown below. I could use a height and do it but I want it to change dynamically: For instance, if the DIV has more content and the height changes in one of the block on the right, the left DIV auto adjust it's height as well. I wonder if flex could help. Here's how it should change to:
I have this HTML so far:
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-8 col-8">
<div class="black">
<p>Bar Graph or Line Graph</p>
</div>
</div>
<div class="col-sm-4 col-4">
<div class="red">
<p>numbers</p>
</div>
<div class="purple">
<p>numbers</p>
</div>
<div class="green">
<p>numbers</p>
</div>
<div class="blue">
<p>numbers</p>
</div>
</div>
</div>
</div>
and CSS:
p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }
JSFiddle Demo
You're using Bootstrap 4, right? Bootstrap 4 implements flexbox by default and you can solve this very easy while using purely classes Bootstrap 4 provides:
<div class="container">
<div class="row">
<div class="col-sm-8 col-8 black">
<p>Bar Graph or Line Graph</p>
</div>
<div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
<div class="red">
<p>numbers and more and so on and on and on</p>
</div>
<div class="purple">
<p>numbers</p>
</div>
<div class="green">
<p>numbers</p>
</div>
<div class="blue">
<p class="mb-0">numbers</p>
</div>
</div>
</div>
</div>
JS Fiddle link: https://jsfiddle.net/ydjds2ko/
Details:
You don't need the class row-eq-height
(it's not in Bootstrap4
anyway) because equal height is default.
The first div with the class col-sm-8
has the right height, it's just not visible with the black background, because the inner div has it's own height. I just removed the inner div and added the class black
to the col. If you need inner div, give it the (Bootstrap4) class h-100
which adjusts the height to the parent element.
the div with the class col-sm-4 get's a the classes d-flex align-content-around flex-wrap. They're aligning the content divs. Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content
Because the <p>
adds a margin at the bottom, your blue div at the
ends doesn't close flush with the black div. I added the class
"mb-0", which sets the margin bottom to "0" so you can see it works.
That should work wether the right or left div is the one with the bigger height property.
Edit: added classes for content alignment.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With