忽略DOM结构中的“楼层”或“级别”

Question

对于响应式网站，我的结构如下：

<div class="menu_container">
    <ul class="menu">
        <li>item menu 1</li>
        <li>item menu 1</li>
    </ul>
    <ul class="menu">
        <li>item menu 2</li>
        <li>item menu 3</li>
        <li>item menu 4</li>
        <li>item menu 5</li>
    </ul>
</div>

（恰好2个 ul.menu ，但每个都有一个不是随机数的 li.item ） “计算机”版本适用于五个版本。但是对于smarthphone，我需要这样的结构：

<div class="menu_container">
        <li>item menu 1</li>
        <li>item menu 1</li>
        <li>item menu 2</li>
        <li>item menu 3</li>
        <li>item menu 4</li>
        <li>item menu 5</li>
</div>

CSS（没有JS！）中是否有一种方法可以“忽略” DOM中的“楼层/级别”？我需要 item菜单上的flex行为，但由于在DOM中将它们分为2个这一事实，设计被弄乱了。

我希望实现的是：一个垂直菜单，其中所有项目均使用相同的可用垂直空间，但不超过50像素。

.menu_container{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
 }
.menu_container li{
    flex:1;
    max-height:50px;
}