如何实现单个DIV换行后多个DIV自动拉伸至相同宽度

我有一个<ul>列表，每个<li>项包含两个<div>，布局要求如下：

• 第二个<div>固定200px宽度
• 第一个<div>填充<li>的剩余空间，且最小宽度为200px

期望实现的核心效果：

• 当容器宽度不足以让两个<div>并排显示时，第二个<div>自动换行到第一个<div>下方，此时第一个<div>拉伸至<li>的完整宽度
• 只要有一个列表项触发换行，所有其他列表项必须同步切换为换行布局

现有代码 #

CSS 代码

.container {
    width: 50%;
    color: white;
    border: 1px solid black;
    padding: 0;
    overflow: auto;
}

ul {
    list-style-type: none;
}

ul li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #999999;
    overflow: auto;
}

.left {
    display: inline-block;
    min-width: 200px;
    width: auto;
    background-color: blue;
    position: relative;
    float: left;
    flex: 1 1 auto; /* dynamic width */
}

.right {
    display: inline-block;
    min-width: 200px;
    background-color: red;
    position: relative;
    float: left;
    flex: 0 0 auto;  /* fixed width */
}

HTML 代码

<ul class="container">
   <li>
     <div class="left">li 1: Some Text</div>
     <div class="right">Static Width</div>
   </li>
   <li>
     <div class="left">li 2: Some Pretty Long Text, Longer Than Others, so be ready to push red div to next line!</div>
     <div class="right">Static Width</div>
   </li>
   <li>
     <div class="left">li 3: Some More Text</div>
     <div class="right">Static Width</div>
   </li>
</ul>

当前问题与优化需求 #

缩小容器宽度时，会出现以下不符合预期的情况：

1. 第二个列表项的蓝色<div>会先内部换行
2. 当宽度缩小到蓝色<div>达到200px最小宽度时，容器会出现滚动条

我需要优化为：当蓝色<div>触达200px最小宽度时，红色<div>直接换行到下方，全程不出现滚动条，所有内容完整显示；同时保证所有列表项同步切换布局。

疑问 #

仅使用CSS能否实现上述需求？

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