Question

这是一个奇怪的，我相信刚刚开始发生，因此不确定它是否是Chrome中的新错误。 Firefox和IE10 +都很好。

基本上，我有一个带有margin-left的弹性项目：auto会将其向右推。工作正常。

但是，当另一个弹性项目的内容出现溢出时，它似乎会折叠渲染上的边距。当您移动浏览器时，它会自行更正。奇怪！？

任何想法的前线？

注意：您可能需要刷新示例几次，因为它似乎有25％的时间呈现o.k。

<h3>Working Example</h3>
<div class="flex">
  <div class="flex__item">
    <div class="dropdown">
      <span>Custom Dropdown</span>
      <div class="dropdown__content">
        <div style="height:40px; border:1px solid red;">Dropdown Content overflow not being evoked</div>
      </div>
    </div>
  </div>
  <div class="flex__item  flex__item--right ">Right</div>
</div>

<h3>Broken Example</h3>
<div class="flex  mb">
  <div class="flex__item">
    <div class="dropdown">
      <span>Custom Dropdown</span>
      <div class="dropdown__content">
        <div style="height:100px; border:1px solid red;">Dropdown Content</div>
      </div>
    </div>
  </div>
  <div class="flex__item  flex__item--right ">Right</div>
</div>

.flex {
  display:flex;
  flex-flow: row nowrap;
  border:1px solid;
  width: 100%;
}
.flex__item--right {
  margin-left: auto;
  background: red;
  color: white;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown__content {
  max-height: 50px;
  overflow-y: auto;
}
.mb {
  margin-bottom: 20px;
}

Answer 1

要以正确的方式回答你的问题，我必须承认我不知道。

但是我再次修改了一些东西：

在此过程中更改CSS时，Chrome正在运行。它只会在您重新加载页面时出错。

知道这一点，我们可以尝试做一些“解决”问题。

您可以添加JQuery库并添加一些要用html页面加载的脚本。

<body onload="scriptName()">

然后你想将另一个css样式归因于这个元素：

function scriptName(){
   document.getElementById("flex__item--right").style.margin-left="auto";
}

这不是修复它的最佳方法，但它应该有效。

Answer 2

这似乎已在最新版本的Chrome版本50.0.2661.102 m

中修复

当其他弹性项目出现溢出时，Flex项目折叠边距：auto;

2 个答案: