css to force flex list to wrap

Issue

I have an ordered list with css (both of which come from elsewhere and can only be adjusted a bit) that formats the items into a row, I want to have multiple rows, but can't figure out how to force it to wrap.

I can not modify any of the "external" styles. A minimum viable example on jsbin

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

I am looking for the result to look like (W1, W2 and W3 are just placeholders). Also, I do NOT want it to wrap before the span.

content  content2
content3 content4
content5 content6
content7 content8

Solution

If you can add something to the html like <span class="howtowrap">, you can also add a <style> tag, for example at the end of a list, with rules that override the current styles. Something like:

#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>
    <li class="external3">
      <div>content 3</div>
    </li>
        <li class="external3">
      <div>content 4</div>
    </li>
    <li class="external3">
      <div>content 5</div>
    </li>
    <li class="external3">
      <div>content 6</div>
    </li>
    <li class="external3">
      <div>content 7</div>
    </li>
    <li class="external3">
      <div>content 8</div>
    </li>
    <!-- 👇 -->
    <style>
      #external1{
        display: inline-grid!important;
        grid-template-columns: repeat(2, min-content);
        grid-auto-rows: min-content;
      }
    </style>
    
  </ol>

Answered By - imhvost