display：flex在Chrome中不起作用 [英] display:flex not working in Chrome

问题描述

我正在使用以下代码将两个具有相同高度的盒子并排放置：

I am using the following code to have two boxes side by side of the same height:

<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-size c设置为 content-box 元素又修复了它。但是，我只是意识到代码无法在Chrome上运行，无论是台式机还是移动设备，无论我的 box-sizing 行是否存在，而且我都不知道找出什么是行不通的。我在移动网站上工作，但使用Chrome却没有显示任何事实，这让我很困扰。

This worked perfectly in Firefox, but I'm working on the mobile version of my site and added box-sizing:border-box; to my code. This messed up with the flex for some reason, so I ended up setting box-sizing to content-box on most elements again and this fixed it. However, I just realized that the code doesn't work on Chrome, whether desktop or mobile, whether my box-sizing lines are there or not, and I can't figure out what isn't working. The fact that I'm working on a mobile site but that nothing shows up using Chrome really bothers me.

对于实时问题，没有框大小的页面为此处，而（应该是）适合移动设备的是此处。

两者在Firefox上都可以正常运行，而Firefox上的移动预览也可以完美显示。谁能帮助我找出问题所在？

For the live problem, the page without the box-sizing is here and the (supposed to be) mobile-friendly one is here.
Everything works fine on Firefox in both, and the mobile preview on Firefox shows it perfectly too. Can anyone help me figure out what's wrong?

推荐答案

将您的.row更改为：

Change your .row to:

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

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

You may also want to report this bug to team behind Chrome.

这篇关于display：flex在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！