Согните контейнер и поплавок, какая ширина правильная? - PullRequest
Новая
       35

Согните контейнер и поплавок, какая ширина правильная?

0 голосов
/ 15 ноября 2018

У меня есть такой документ: 

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">

        main {
            width: 200px;
        }

        main > div {
            display: flex;
        }

        main > div:nth-child(odd) {
            background: red;
            height: 40px;
        }
        main > div:nth-child(even) {
            background: green;
            height: 20px;
        }

        main > aside {
            shape-outside: content-box;
            background: pink;
            width: 50%;
            float: right;
            clear: right;
        }

        main > aside:nth-child(odd) {
            margin-top: 100px;
            height: 50px;
        }
        main > aside:nth-child(even) {
            margin-top: 50px;
            height: 40px;
        }

    </style>
</head>
<body>
    <main>
        <aside></aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <aside></aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </main>
</body>
</html>

, где я хочу сдвинуть некоторые плавающие элементы на заданное смещение.Это работает в Firefox 63, но не в Chrome 69, и мне интересно, каково правильное поведение, и если какие-либо обходные пути известны.

Поэтому я хочу, чтобы основное содержимое обтекало только область содержимого в стороне,и игнорировать верхнее поле, даже если div идет после отступа в документе.Чтобы добиться этого, я использую формы CSS, чтобы основной контент обтекал поле контента.Чтобы каждый элемент (и в этом мое сомнение) брал только доступную ширину с учетом плавающих элементов, я установил display: flex.В Firefox это делает 50% только для div'ов рядом с полем с дополнительным содержимым.Документировано ли это поведение где-то, что контейнеры flex не перекрываются с плавающими элементами, как это делают блочные элементы?

Chrome не учитывает форму css и делает каждый div в main до тех пор, пока не будет выделена последняя половина ширины, когдау div'ов есть display: flex.

Ссылка Codepen: https://codepen.io/anon/pen/qQjOqp

...