Flexbox layout and background issues - html

Question

While developing new website for our client (he delivered design and insisted on using flexbox), we've come to element that looks like this (the "Samochody Peugeot" section with 2 little boxes at right):
Grid starts at text in left box, and ends at end of image in right boxes. The only real solution that we can find is to create the gray background using absolute positioned :before pseudo-element, but it seems pretty hacky.
At bigger widths the gray bg should expand to left, but everything else should stay in grid.
Is there any better way to achieve this kind of layout than using :before?
<section class="boxes">
<div class="container">
<div class="boxes__box">
<h3>Samochody<br/>PEUGEOT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
<div class="boxes__box-holder">
<div class="boxes__box boxes__box--small">
<h3>PONAD 20 LAT<br/>DOŚWIADCZENIA</h3>
<a class="btn" href="">O firmie</a>
</div>
<div class="boxes__box boxes__box--small">
<h3>POZNAJ NASZE<br/>USŁUGI</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
</div>
</div>
</section>
.boxes {
.container {
display: flex;
}
&__box {
width: 68%;
background: orange;
position: relative;
&:first-child:before {
content: '';
height: 100%;
width: 100vw;
background: red;
position: absolute;
right: 100%;
z-index: -1;
top: 0;
}
}
&__box-holder {
width: 32%;
}
}