当我更改窗口大小时，一个简单的flex wrap设置可以正常工作(如预期的那样，较窄的窗口会强制wrap(。然而，当我切换到移动模拟(在Chrome 70.0上(时，尽管大小发生了变化，但这两个框显示为并排或堆叠(包裹(，这取决于我切换到手机之前的配置。换句话说，如果窗口一开始很宽，那么框将而不是包裹，并将保持并排。
在移动模拟模式下直接加载，尽管模拟的移动页面宽度很窄，但我还是将框并排放置。
不知道我在这里错过了什么。以下代码：
<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">
div.flexrow { display: flex; flex-wrap: wrap; padding-left: 20px }
div.header { border: 1px solid black; min-width: 320px; flex-grow: 1 }
div.content { border: 1px solid black; min-width: 320px; flex-grow: 1 }
</style>
</head>
<body>
<div class="flexrow">
<div class="header">
<h3>Section H3 header</h3>
<p>text</p>
</div>
<div class="content">
<ol>
<li>List item 1. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</li>
<li>List item two. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</li>
<li>List item the third. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</li>
</ol>
</div>
</div>
<body>
</html>
我使用的是Pixel 2XL、iPhone X，或者Chrome上其他几个模拟移动选项中的任何一个。
显然，移动设备上的Chrome在处理移动设备上字体大小方面过于智能。解决方案：通过添加来关闭该功能
<meta name="viewport" content="width=device-width">
位于HTML的头块。