дисплей: flex не работает в Chrome

Я использую следующий код, чтобы иметь две коробки бок о бок одинаковой высоты:

<style>
.row {display:flex;}
.col {flex:1;}  
</style>

<div class="row">
  <div class="col content">some content</div>
  <div class="col content raw">some other content</div>
</div>

это отлично работало в Firefox, но я работаю над мобильной версией своего сайта и добавил box-sizing:border-box; в моем коде. По какой-то причине это испортило flex, поэтому я закончил настройку box-sizing to content-box на большинстве элементов снова и это исправил. Тем не менее, я только что понял, что код не работает на Chrome, будь то рабочий стол или мобильный, будь то мой box-sizing строк или нет, и я не могу понять, что не работает. Тот факт, что я работаю на мобильном сайте, но ничего не появляется с помощью Chrome, действительно беспокоит меня.

для живой проблемы, страница без box-sizing и здесь и (предположительно) мобильным дружественным является здесь.
Все отлично работает на Firefox в обоих, и мобильный просмотр в Firefox показывает это отлично. Кто-нибудь может помочь мне понять, что случилось?

9
css flexbox google-chrome

2 ответов

изменить .row to:

.row {
    display: inline-flex;
    width: 100%;
}

вы также можете сообщить об этой ошибке команде за Chrome.

8

проблема в том, что вы не снимите поплавки.

.header {
  float: left;
  width: 100%;
  border: 1px solid #000;
}
.row {
  display: flex;
}
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>

просто добавить

.row {
  clear: both;
}


.header {
  float: left;
  width: 100%;
  border: 1px solid #000;
}
.row {
  display: flex;
  clear: both;
}
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
1