CSS: Breaking a Unordered List

Question

I want to break a unordered list using CSS. What i currently have is this

What i require is this

Scenario after Marcus code

Here is the html

<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a  href="https://prod.us/System_Functionality/Functional_
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>
</ul>
</div>

Here's the CSS

tab-content { 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: left;
   margin-left: 2.2em;
} 
.tab-content-block { 
   padding: 0 1em 1em .5em;
   min-width: 25%;
} 
.tab-content-block ul li {
   margin-bottom:10px;
   margin-left:-17px;
}

Answer 1

You can use columns only in the <ul> .

.tab-content-block ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

See it working:

https://jsfiddle.net/hrm3tx9j/1/

Answer 2

Change the flex-direction to column and give flex-wrap

tab-content { 
 display: flex;
 flex-direction: column;
 height: 500px;
 flex-wrap: wrap;
 justify-content: left;
 margin-left: 2.2em;
} 

It will be great if you provide a Demo link of jsFiddle or Plunkr.