在一个div盒子中，ul的li怎么溢出换行

问题遇到的现象和发生背景

给div盒子设定了宽高，ul浮动后li溢出了盒子的范围
（我给li也设置了宽高）

问题相关代码，请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法

我尝试给div加
overflow-x: hidden;
overflow-y: auto;
但是也没换行

我想要达到的结果

li能够按顺序换行排列在div盒子中

li不要定高度

是这个意思吗？
如果不想给ul加宽度，可以去掉ul的width和float


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 160px;
            height: 480px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        ul {
            float: left;
            width: 160px;
        }
        li {
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>11111111111111111111111111111111111111111111111111</li>
            <li>22222222222222222222222222222222222222222222222</li>
            <li>33333333333333333333333333333333333</li>
        </ul>
    </div>
</body>
</html>

要按顺序排列 li不使用浮动

img

img