UL不会留在父母Div

Question

父div（.box）应该自动获取高度，UL应该在div内。但UL退出了div。

而不是float：left，当我使用display：inline-block时，即使它们保留在框中，它也会导致列表项中断。

我搜索了相关的相关问题，但我找不到任何解决方法。

HTML

<div class="box">
   <div class="postImg">
      <img src="img/youtube.png">
   </div>
   <h4>Başlık Başlık Başlık Başlık</h4>
   <p class="shorttext">Başlık Başlık Başlık Başlık Başlık Başlık 
Başlık Başlık BaşlıkBaşlık Başlık BaşlıkBaşlık BaşlıkBaşlıkBaşlık</p>

   <div class="cats">
      <ul>
         <li>Sports</li>
         <li>Gaming</li>
      </ul>
      <a href="#" class="goFullEntry">Read More</a>
    </div>    
 </div>

CSS

 .box /* the grid */
{
    background-color: white;
    font-family: monospace;
    padding:10px 10px 10px 10px;
    box-shadow:inset 0 0 5px #DDD;
    border-radius: 3px; 
    margin-bottom: 2%;
    break-inside: avoid-column;
    word-wrap: break-word;
}
.box ul
{
    padding:0; /* removes the space between the div and list */
}

.box ul li
{
    list-style:none;
    font-family: monospace;
    padding:10px 10px 10px 10px;
    box-shadow:inset 0 0 2px #DDD;
    float: left; /* display:inline-block; is also an option */
}

.goFullEntry  /* Full post review button */
{
    text-decoration: none;
    color:white;
    padding:10px 10px 10px 10px;
    background-color: red;
    float: right;
}