我正在处理一个带有3个Flexbox容器的Flexbox布局，其中一个容器内部有嵌套的Flexbox布局。带有嵌套Flexbox的Flexbox布局似乎过早地打包/断开，即使有空间可供其占用。我在父元素上尝试了许多不同的Flex-grow和Flex-shrink组合，我觉得自己快疯了。但我还是觉得有一个简单的解决办法。
当浏览器的大小是~ 1600 px时，它的工作原理正是我想要的，但一旦它的大小变小，它似乎打破了布局和 Package ，即使有可用的空间，它继续保持它的布局。
如果我更改父对象上的弹性增长设置，但弹性框不再对齐，我可以实现我想要的效果。如何保持对齐和弹性框增长？
布局正确，但过早中断示例https://jsfiddle.net/9g5dam6f/
生长正常但未正确对齐示例https://jsfiddle.net/bctgv7ah/
下面是过早中断但正确对齐的代码：

.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>