Предотвратить <li>от переполнения родителя <ul>

Question

У нас есть menu, который имеет следующую структуру ниже.Цель состоит в том, чтобы установить max-height на <ul class=float-one> так, чтобы после четырех <li> он всегда переносился в следующий столбец.

Как мы можем предотвратить переполнение <li> родительского тега <ul>?

Мы пытались:

1. удалить max-height, но без этого мы не сможем обеспечить, чтобы в каждой строке было указано только четыре <li> элемента.

Цели:

1. переносить в два столбца после четырех <li> элементов
2. сохранять следующий столбец в пределах <ul>
3. если текст выходит за пределы, <ul>, просто поместите его в родительский тег <ul>.

Текущий выпуск:

Желаемый выход:

.containing-div {

  display: block;
  height: auto;
	float: left;
}
.float-one {
	border: 1px solid black;
	
	column-count: 2;
	color: blue;
	width: 70%;
	flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	padding: 32px;
}
.float-one li {
	padding: 18px;
}
.float-two {
	border: 1px dashed green;
	width: 30%;
	margin: 32px;
	margin-left: 0;
}
.floating-div {
  display: flex;
	width: 100%;
	max-width: 1200px;
}
.floating-div ul {
  display: inline-block;
  height: auto;
  max-height: 200px;
}

<div class="containing-div">
    <div class="floating-div">
        <ul class="float-one">
            <li>List Item One</li>
            <li>List Item Two</li>
            <li>List Item Three</li>
            <li>List Item Four</li>
									<li>Monotonectally syndicate resource</li>
            <li> Distinctively implement inte</li>
            <li>ideas for</li>
            <li>List Item Four</li>
									<li>Monotonectally syndicate resource</li>
            <li> Distinctively implement inte</li>
            <li>Proactively brand out</li>
            <li> Assertively harness multifunctional paradigms</li>
        </ul>
				
					<div class="float-two">
						  <ul>
            <li>List Item Five</li>
            <li>List Item Six</li>
            <li>List Item Seven</li>
            <li>List Item Eight</li>
						</ul>
        </div>
    </div>
</div>