display: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 and the (supposed to be) mobile-friendly one is 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;
}

display:flex 在 Chrome 中不工作

display:flex not working in Chrome

css

google-chrome

flexbox