当其他弹性项目溢出时弹性项目折叠边距：自动；答案

【问题标题】：Flex item collapsing margin when other flex item has an overflow: auto;当其他弹性项目溢出时弹性项目折叠边距：自动；
【发布时间】：2016-06-02 15:19:15
【问题描述】：

这是一个奇怪的问题，我相信它刚刚开始发生，所以不确定这是否是 Chrome 中的一个新错误。 Firefox 和 IE10+ 都可以。

基本上，我有一个带有 margin-left: auto 的弹性项目，它把它推到右边。工作正常。

但是，当另一个 flex 项目的内容引发溢出时，它似乎会在渲染时折叠边距。当您移动浏览器时，它会自行纠正。奇怪！？

任何想法的前端？

注意：您可能需要多次刷新示例，因为 25% 的时间它似乎可以渲染。

http://codepen.io/rhysyg03/pen/rePgQY

<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;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

要正确回答你的问题，我不得不承认我不知道。

但我已经评论了一些东西：

当您在此过程中更改 CSS 时，Chrome 可以正常工作。它只会在您重新加载页面时出错。

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

您可以添加 JQuery 库并添加一些您想在 html 页面中加载的脚本。

<body onload="scriptName()">

那么你想为这个元素添加另一个 CSS 样式：

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

这不是修复它的最佳方法，但它应该可以工作一段时间。

【讨论】：

嘿，感谢您试一试，但希望能找到 CSS 答案。

【解决方案2】：

这似乎已在最新版本的 Chrome 版本 50.0.2661.102 m 中得到修复

【讨论】：