Flex-wrap CSS布局问题：实现新增元素换行（不可修改HTML）

我有一个用于在一行展示主、次要信息的HTML结构，之前要求每行只显示3个元素，效果一直没问题。但特定场景下API会额外返回3个元素，导致所有元素被挤压变形。我想让新增的3个元素换行展示，试了flex-wrap的方案却没生效。（注：主信息得优先高亮展示，次要信息是懒加载的，没法直接改HTML结构，需要取消注释让新增元素显示）

HTML #

<div class="results">
    <div class="primary-container">
        <div class="card">
          1
        </div>
    </div>
     <div class="secondary-container">
       <div class="card">2</div>
       <div class="card">3</div>
       <!-- <div class="card break">4</div>
       <div class="card">5</div>
       <div class="card">6</div> -->
      </div>
  </div>

CSS #

.results {
  display: flex;
  flex-direction: row;
}

.primary-container {
  flex: 1 1 33.33333%;
  display: flex;
}

.card {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  padding: 30px;
  border: 1px solid gray;
}

.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
}

card.break {
  flex-basis: 100%;
  flex-wrap: wrap;
}

问题出在这几个地方：

1. CSS选择器写错了，应该是.card.break，你少了类选择器前面的点
2. flex-wrap是给父容器加的属性，用来控制子元素是否换行，你加到子元素上肯定没用
3. 次要容器secondary-container没开换行，而且里面的card宽度设置不对，导致元素挤在一起

调整后的CSS代码：

.results {
  display: flex;
  flex-direction: row;
}

.primary-container {
  flex: 1 1 33.33333%;
  display: flex;
}

.card {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  padding: 30px;
  border: 1px solid gray;
}

.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
  flex-wrap: wrap; /* 允许容器内元素换行 */
}

/* 让次要容器里的card默认占一半宽度 */
.secondary-container .card {
  flex: 1 1 50%;
  box-sizing: border-box; /* 防止padding把宽度撑超 */
}

/* 带break类的card占满整行，强制换行 */
.card.break {
  flex-basis: 100%;
}

然后把HTML里的注释取消，让新增元素显示：

<div class="results">
    <div class="primary-container">
        <div class="card">
          1
        </div>
    </div>
     <div class="secondary-container">
       <div class="card">2</div>
       <div class="card">3</div>
       <div class="card break">4</div>
       <div class="card">5</div>
       <div class="card">6</div>
      </div>
  </div>

这样改完之后，主信息占1/3宽度保持高亮，次要容器占剩下的2/3；里面的2、3号card各占一半，4号card占满整行，5、6号自动换到下一行，不会再挤压所有元素。

内容的提问来源于stack exchange，提问作者Parag Diwan