Two-column vertical-numbered lists with Flexbox

Question

I'm sure this must be a duplicate, but I cannot find any related answers because so many people are referring to flexbox elements as "lists", when they're not actually using <ul> or <ol> HTML elements, and are making the equivalent of inline-block div elements.

I have an unordered list that I need to display as two columns using Flexbox. Based on today's reading, I have managed two columns, but the index order of the items goes from left-to-right, instead of top-to-bottom:

ol { display:flex; flex-wrap:wrap; flex-direction:row; }
ol li { flex:1 1 auto; width:40%; }
    

<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>

I need the output to be:

1. Item A          5. Item E
2. Item B          6. Item F
3. Item C          7. Item G ... etc

I tried to swap out flex-direction:row with column, but it just displayed a single list.

Answer 1

I think you have to define a maximum height. You're current css lines are not defining "WHERE" the wrap should happen.

ol { display:flex; flex-wrap:wrap; flex-direction:row; max-height: 30px}
ol li { flex:1 1 auto; width:40%; }
    

<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>

Answer 2

You could also use columns (https://www.w3schools.com/css/css3_multiple_columns.asp). It can be pretty janky at times, but it works well for lists in my opinion.

ol {
  columns: 2
}

<ol>
 <li>Item A</li>
 <li>Item B</li>
 <li>Item C</li>
 <li>Item D</li>
 <li>Item E</li>
 <li>Item F</li>
 <li>Item G</li>
 <li>Item H</li>
</ol>