Resize background color base on child height

[sadpandas]

Here’s my code pen: https://codepen.io/sadpandas/pen/KKwgObb

I have a flexbox container and two child divs. What I am trying to do, is to have a “background color” that matches the height of the textbox, but spans to the sibling div that contains the image.

Without using media queries and upon wrapped, the background color needs to continue to wrap / match the textbox height, but needs to be completely apart from the image.

My current method uses linear-gradient, and a hard coded percentage that approximates how much space I need for the text. I am looking for something more reliable and reusable, as I have several of these sections in my website.

.wrapper {
width: auto;
max-width: 1686px;
background: linear-gradient(#f7f7f7 50%, white 20%);
display: flex;
justify-content: center;
flex-wrap: wrap-reverse;
}

.left {
flex-basis: 512px;
flex-grow: 1;
padding-top: 60px;
padding-left: 25px;
}

.right{
padding-top: 25px;
flex-basis: 512px;
flex-grow: 1;
}
Image of what I am trying to achieve:

I am open to using other methods other than linear gradient on the parent to achieve this. I have doubts that I am using best practices, but I am not sure how to achieve this.

A few more requirements: – The image on the left cannot be wrapped within the grey background – The grey background must have the height of the text height, and should resize if the text container increases in height. – The text cannot poke out of the grey background – I am refraining from using media-queries due to client requests. -The image is starting at a slightly lower point than the text on desktop view

Things that I have already tried: – Using Javascript. Client rejected it as they find it too much of an overkill for getting the height of one container – Pseudo elements + javascript. Also rejected for similar reasons

Any help is appreciated, thanks!

[Author]

Posts