css - 显示 :flex not working in 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 背后的团队。