Flexbox wraping too early? - html

Question

I am working on a flexbox layout with 3 flexbox containers and where one of them has a nested flexbox layout inside of it. The one with the nested flexboxes seems to wrap/break too early, eventhou there is available for space for it to take up. I have tried so many different combinations of flex-grow and flex-shrink on the parent elements that I feel like I'm losing my mind, still I can't shake the feeling that there is a simple solution to this.
It works exactly as I want it when the size of the browser is ~ 1600px but as soon as it resizes to smaller it seems breaks the layout and wraps, even thou there is available space for it to continue maintain it's layout.
I can achieve what I want if I change the flex-grow setting on the parent but then the flexboxes doesn't align anymore, which I want. How do I keep both the alignment and the flexbox-growing?
Correct layout but breaking too early example https://jsfiddle.net/9g5dam6f/
Growing properly but not aligning correctly example https://jsfiddle.net/bctgv7ah/
Here is the code as well for the one that breaks too early, but is correctly aligned:
.content {
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-info {
margin: 0 0px 20px;
box-sizing: border-box;
}
.columns {
display: flex;
padding: 1.2em;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-45-info {
width: 40%;
background-color: hotpink;
}
.col-26-info {
width: 26.65%;
justify-content: end;
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: wrap;
background-color: purple;
}
.col-33-info {
width: 33.33%;
background-color: pink;
}
.col-50-info {
width: 51%;
display: flex;
flex-wrap: wrap;
gap: 2em;
background-color: grey;
opacity: 50%;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 21px;
text-align: left;
}
.columns h1 {
margin-bottom: 1rem;
}
.columns p {
font-size: 16px;
font-family: Helvetica, sans-serif;
line-height: 1.3;
}
li {
text-align: left;
font-size: 16px;
font-family: Helvetica, sans-serif;
list-style-type: none;
line-height: 1.17;
}
.columns a {
text-decoration: underline;
font-family: Helvetica, sans-serif;
color: black;
font-size: 16px;
width: 100%;
}
<div class="content">
<div class="columns">
<div class="col-info col-33-info">
<h1> TRAILBLAZER </h1>
<li>Art Direction </li>
<li>Creative Concept</li>
<li> Graphic Design </li>
<li> Web Design </li>
<li> Web Development </li>
<li> Visual Effects </li>
</div>
<div class="col-info col-45-info">
<p> Art direction and campaign for design collaboration between international brands Marimekko, Matty Bovan, Nomen Nescio, palmer//harding, Per Götesson, Zandra Rhodes, final-year fashion students at Beckmans College of Design and Stockholm Fashion
Week. <br> <br> The story of the Trailblazer is the story of the innovator. Inspired by the strong artistic approach of all brand and designers, we created a creative concept inspired by 90’s anime and manga that could fit each collections individuality,
and where each collection could be the hero in their own world, where they blaze a trail for others to walk on. <br> <br> The final develiberables included: A concept film, campaign photos, lookbook photos, website design and development, digital
and some material.
</p>
</div>
<div class="col-info col-26-info">
<div class="col col-50-info">
<li> <a target="_blank" href="https://trailblazer.beckmans.college/"> Visit the web </a> <br>
<a target="_blank" href="https://vimeo.com/510337626"> Watch the film </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ELLE Magazine </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ArtsThread </a>
</li>
</div>
<div class="col-50-info">
<li class="col" style="margin:0;">
Date
<br> Team </li>
<li class="col"> 2020 <br> Almir Jasarevic <br> Astrid Askert <br> Elisabet Lindén <br> Saba Mehrabanfar <br> Sofia Hjortberg
</li>
</div>
</div>
</div>
</div>

Answer 1

I got it working by using justify: space-between; and setting a fixed width for the sibling elements.
You can see the working example here: https://jsfiddle.net/yrwh062z/2/