防止<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>