如何强制Flex布局有序列表换行（不可修改外部样式）

现有外部提供的有序列表及配套CSS，列表被强制设置为单行显示。需求改为多行排列，无法修改任何外部样式，仅能控制自定义类.howtowrap或注入元素，要求仅在注入的span元素位置换行，且禁止在该span前换行。

原外部CSS代码：

#external1 {
    bottom: 0;
    left: 0;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    position: absolute;
    right: 0;
    top: 0;
    
    white-space: nowrap;
}
.external2 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

.external3 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

原HTML代码：

<ol id="external1" class="external2">
    <li class="external3">
      <div>content</div>
    </li>
    <li class="external3">
      <div>content 2</div>
    </li>
    <!-- 可注入元素，也可为后续li添加类 -->
    <span class="howtowrap">W1</span>
    <li class="external3">
      <div>content 3</div>
    </li>
    <li class="external3">
      <div>content 4</div>
    </li>
    <span class="howtowrap">W2</span>
    <li class="external3">
      <div>content 5</div>
    </li>
    <li class="external3">
      <div>content 6</div>
    </li>
    <span class="howtowrap">W3</span>
    <li class="external3">
      <div>content 7</div>
    </li>
    <li class="external3">
      <div>content 8</div>
    </li>
</ol>

期望效果：

content  content2
content3 content4
content5 content6
content7 content8

自定义CSS代码（仅可控制此部分） #

/* 覆盖外部容器的nowrap限制，允许flex换行 */
#external1.external2 {
  flex-wrap: wrap;
  white-space: normal;
  overflow-x: hidden; /* 移除不需要的横向滚动条 */
}

.howtowrap {
  flex-basis: 100%; /* 占据整行，强制flex容器换行 */
  width: 100%;
  height: 0; /* 隐藏注入元素的高度占位 */
  overflow: hidden; /* 隐藏注入元素的内容 */
}

逻辑说明 #

1. 利用CSS优先级覆盖外部容器的white-space: nowrap和flex容器的默认不换行设置，让flex布局支持自动换行。
2. 通过.howtowrap的flex-basis: 100%属性，让注入的span元素占据整行空间，强制其之前的列表项结束当前行，后续列表项自动换行到下一行。
3. 设置height:0和overflow:hidden隐藏注入span的内容与高度，避免影响页面视觉效果。

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