我有两组段落，我称之为左和右-见问题末尾的HTML。当它们的 parent 足够宽时，我希望它们并排显示，在等宽列中。当它们的 parent 窄时，我希望它们一个在另一个上面显示。
父浏览器不是整个浏览器，所以媒体查询不是一个解决方案。（这是在Vue组件中进行的，并且可能有多个这样的组件-可能具有不同的宽度和高度-同时在屏幕上。）
我尝试了一个基本的浮动方法：

<style>
.container {width:100%;border: 1px solid;margin:0.5rem;}
.left {color:#006; min-width:20rem; width:50%; float:left;}
.right {color:#060; min-width:20rem; width:50%; float:left;}
</style>

当相邻的列有空间时，这很好地工作：

当它变窄时，它确实会切换到右上方的左，但它们停留在20 rem宽度，而不是填充单列的全宽。

我见过很多使用flex或grid的解决方案，但当我尝试调整它们时，它们不起作用。例如，我发现了这个flex解决方案：

.container {width:100%;border: 1px solid;margin:0.5rem; display:flex;}
.left {color:#006;flex:max(20rem, 50% - 0.5rem)}
.right {color:#060;flex:max(20rem, 50% - 0.5rem)}

但它始终保持为两个50%列，无论父级的宽度如何。

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>

  <div class="right">
    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
    <p>Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, aenean vulputate eleifend tellus.</p>
  </div>
</div>