css 强制弹性列表换行

Question

我有一个带有 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;
}

/*this class is under my control */
.howtowrap {
  flex-basis: 100%;
  width:100%;
}

  <ol id="external1" class="external2">
    
    <li class="external3">
      <div>content</div>
    </li>
    <li class="external3">
      <div>content 2</div>
    </li>
   <!-- I am injecting this element, I could add a class to the next li instead if that would be better -->
    <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>

Answer 1

要在多个子项填满父项的宽度时使 Flex 容器的子项换行，请在父元素上使用 flex-wrap 属性。

您的情况：

.external2 {
  /** ...old properties and values */
  flex-wrap : wrap
}