显示：flex 在 Chrome 中不起作用

Question

我正在使用以下代码让两个盒子并排在同一高度：

<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 设置为 content-box 并修复了它。但是，我刚刚意识到代码在 Chrome 上不起作用，无论是桌面还是移动设备，无论我的 box-sizing 行是否存在，我无法弄清楚什么不起作用。我在一个移动网站上工作，但使用 Chrome 没有任何显示，这一事实真的让我很困扰。

对于实时问题，没有box-sizing 的页面是here，（应该是）适合移动设备的页面是here。
两者在 Firefox 上一切正常，Firefox 上的移动预览也完美显示了这一点。谁能帮我找出问题所在？

Answer 1

将您的 .row 更改为：

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

您可能还想将此错误报告给 Chrome 背后的团队。

Answer 2

问题是你没有清除浮动。

.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>

Answer 3

用途：

row {
    display: flex;
    flex-direction: row;
}