All solutions

I have issues with setting the max-height of an element, specifically my testimonial containers. I tried to set a max height of 250px but it still continued to grow past it. I assumed it may because I have a flex property on them but I am not sure.

Also I am curious if I am using flexbox too much for each design element. Is this a bad practice? I am just more comfortable using it than grid but will practice other display methods if it is bad practice.

Thanks for any feedback!

Even though I was able to make this solution with my HTML layout, I feel it is not efficient and could be better. I feel I use too many divs to make my layout, but I am just not sure if what I am doing is correct or if there is another way I can make things simpler why still achieving a similar result.

ex: Too many divs to lay things out

<div class="scoreBox reaction">
            <div class="topRight"></div>
            <div class="topLeft"></div>
            <div class="btmRight"></div>
            <div class="btmLeft"></div>
            <div class="titleContainer">
              <img
                src="assets/images/icon-reaction.svg"
                alt="red lightning symbol"
              />
              <div>Reaction</div>
            </div>
            <div class="scoreContainer">
              <div class="yourScore"></div>
              <div class="yourBaseScore">/ 100</div>
            </div>
</div>