[Помогите] Баг с flex-direction: column в Chrome

keysivi · 9 июн 2017

Все привет!
Столкнулся с неприятным "сюрпризом" от flexbox, когда создавал каталог с заданными данными:
Одинаковая высота элементов в строке. Сам элемент делится на три части: Шапка вверху с заголовком и две колонки внизу с разным фоном одинаковой высоты на всех элементах в строке.

При полученной структуре HTML - Chrome начинает конфликтовать с flex-direction: column.

Firefox отображает все корректно.

В HTML и CSS ошибок не нахожу. (баг стабильный)

Вот упрощенный код для отдельного элемента:

HTML:

!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; UTF-8" />
        <meta content=" UTF-8" />
        <title>Баг хрома</title>
    </head>
    <body>
        <div class="two">
            <h3>Заголовок блока</h3>
            <div class="content">
                <div class="left_col">Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки.</div>
                <div class="right_col">Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.</div>
        </div>
    </body>
    <style>
        body{ 
            font-family: arial;     
        }         
        h3{     
            background-color: #e5e5e5;     
            padding: 30px;     margin: 0 0 30px 0;     
            flex-basis: 10px;     
            flex-grow: 1;
        }         
        .two{
            min-width: 600px;     
            flex-basis: 10px;     
            flex-grow: 1;     
            background-color: #999999;     
            padding: 30px;     
            margin: 0 30px 30px 0;
            flex-direction: column; /* при данной раскладке - конфликтует с хромом */ 
            display: flex;     
        }     
        .content{     
            flex-basis: 10px;     
            flex-grow: 1000;         
            display: flex;     
        }     
        .left_col{     
            background-color: #e5e5e5;     
            padding: 30px;     
            margin-right: 30px;     
            min-width: calc(50% - 15px);     
            max-width: calc(50% - 15px);     
            box-sizing: border-box;     
        }     
        .right_col{     
            background-color: #e5e5e5;
            padding: 30px;     
            min-width: calc(50% - 15px);     
            max-width: calc(50% - 15px);     
            box-sizing: border-box;     
        }
    </style>
</html>

А вот полный код для каталога (В обоих случаях стили упрощены для наглядности)

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; UTF-8" />
        <meta content=" UTF-8" />
        <title>Баг хрома</title>
    </head>
    <body>
        <h2>Смотреть в Chrome!</h2>
        <div id="base">
            <div class="two">
                <h3>Заголовок блока</h3>
                <div class="content">
                    <div class="left_col">Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки.</div>
                    <div class="right_col">Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.</div>
                </div>
            </div>
            <div class="two">
                <h3>Заголовок блока</h3>
                <div class="content">
                    <div class="left_col">Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.</div>
                    <div class="right_col">Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.</div>
                </div>
            </div>
            <div class="two">
                <h3>Заголовок блока</h3>
                <div class="content">
                    <div class="left_col">Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки. Контент левой колонки.</div>
                    <div class="right_col">Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки. Контент правой колонки.</div>
                </div>
            </div>
        </div>
    </div>
    </body>
    <style>
        body{ 
            font-family: arial;     
        }     
        h2{     
            text-align: center;     
        }     
        h3{     
            background-color: #e5e5e5;     
            padding: 30px;     margin: 0 0 30px 0;     
            flex-basis: 10px;     
            flex-grow: 1;
        }     
        #base{     
            display: flex;     
            flex-wrap: wrap;     
            padding-left: 30px;     
        }     
        .two{
            min-width: 600px;     
            flex-basis: 10px;     
            flex-grow: 1;     
            background-color: #999999;     
            padding: 30px;     
            margin: 0 30px 30px 0;
            flex-direction: column; /* при данной раскладке - конфликтует с хромом */ 
            display: flex;     
        }     
        .content{     
            flex-basis: 10px;     
            flex-grow: 1000;         
            display: flex;     
        }     
        .left_col{     
            background-color: #e5e5e5;     
            padding: 30px;     
            margin-right: 30px;     
            min-width: calc(50% - 15px);     
            max-width: calc(50% - 15px);     
            box-sizing: border-box;     
        }     
        .right_col{     
            background-color: #e5e5e5;
            padding: 30px;     
            min-width: calc(50% - 15px);     
            max-width: calc(50% - 15px);     
            box-sizing: border-box;     
        }
    </style>
</html>

Буду очень рад, если кто нибудь сможет объяснить причину бага, и подсказать решение.
Заранее спасибо!

Perat · 9 июн 2017

Доброго, flex-flow: column wrap; работает, если зафиксировать высоту контейнера (и, желательно, ширину айтемов, для наглядности).

keysivi · 10 июн 2017

Perat,

Perat сказал(а): ↑

Доброго, flex-flow: column wrap; работает, если зафиксировать высоту контейнера (и, желательно, ширину айтемов, для наглядности).
Нажмите, чтобы раскрыть...

Спасибо!... К сожалению решение фиксировать высоту контейнера не подходит.

Объем контента в элементах каталога сильно разнится. Поэтому желательно позволить определять высоту контейнера исходя из объема контента... Поэтому я и использовал флекс - потому что он позволяет это сделать без использования js.

[Помогите] Баг с flex-direction: column в Chrome

keysivi

Perat

keysivi