如何在浏览器字号调整致溢出时让一级菜单垂直显示？

我用Flexbox实现了一个简单的一级菜单，采用桌面优先的响应式方案：水平空间充足时菜单横向排列，通过max-width: 650px的媒体查询，在空间不足时切换为垂直布局。

但出于无障碍适配需求，需要确保文本缩放时内容不会溢出：使用Ctrl+页面缩放能正常显示，但调整浏览器字号设置时，7个链接会超出容器，而且无法确定一个合适的固定断点（提前设置更大断点来适配大字号的方案我并不喜欢）。

我尝试给ul标签设置flex-wrap: wrap，但这样链接会逐个换行，而我希望菜单直接切换为垂直布局。可以通过给html标签设置font-size: 2em来模拟浏览器字号增大的场景（代码中有相关注释）。

代码示例 #

CSS 代码 #

* {
  box-sizing: border-box;
}

/* html {
  font-size: 2em;
} */

body {
  margin: 0;
}

.main-menu {
  border: 3px solid rgb(230, 121, 38);
  padding-block: 0.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.main-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-menu ul li a {
  display: block;
  padding: 0.7rem;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2rem;
  border: 1px solid black;
  text-align: center;
}

@media (max-width: 650px) {
  .main-menu ul {
    flex-direction: column;
  }
}

HTML 代码 #

<nav class="main-menu">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
  </ul>
</nav>

提问 #

有没有纯CSS的解决方案？如果没有，JavaScript方案是否可行？

内容的提问来源于stack exchange，提问作者Nick