Простая настройка гибкого переноса работает правильно, когда я изменяю размер окна (более узкое окно вызывает перенос, как и ожидалось).Однако, когда я переключаюсь на мобильную эмуляцию (в 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.