Flexbox 防止边距被尊重

Question

我正在努力获得一个使用边距和overflow: hidden 的 flexbox 布局。

我正在集成的轮播组件使用此方法进行响应，但一旦将 display:flex 应用于父级，margin 和 overflow: hidden 属性就会被忽略，如下例所示。

顶部版本没有嵌套在一个弹性盒子中，就像它下面的一样，并且不尊重父级的边距。

以下代码和此 Plunker 中演示了该问题。 http://plnkr.co/edit/qU1oq1Vq1X3FQMWLJiQk?p=preview

body {
  margin: 400px;
}

.overflowHidden {
  overflow: hidden;
}

.flex {
  display: flex;
}

<div>
  <div class="overflowHidden">
    <img src="http://lorempixel.com/600/400" />
  </div>
</div>

<div class="flex">
  <div>
    <div class="overflowHidden">
      <img src="http://lorempixel.com/600/400" />
    </div>
  </div>
</div>

我知道关于这个主题有很多类似的问题，但我找不到与我的特定用例相关的任何内容。

Answer 1

解决办法如下：

.flex > div { overflow: hidden }

revised demo

---

首先要注意的是，边距与这个问题无关。事实上，利润是受到尊重的。它们只是随元素一起旅行，它正在扩展一个容器。

---

非flex div容器默认有display: block。

在block formatting context 中，当图像变得太大而无法放入带有overflow: hidden 的容器时，它会像预期的那样消失。

父 div 及其边距保持稳定且不受干扰。

但是，flex formatting context 的行为不同。

首先，在 flex 示例中，您有三个级别的 div。块示例中只有两个。但这并不重要。

这里的关键信息是这样的：

当你将display: flex 或display: inline-flex 应用到一个元素时，它就变成了一个弹性容器，它的子元素变成了弹性项目。 默认情况下，弹性项目不能小于他们的内容的大小。它们的默认设置为min-width: auto。

因此，当图像对于其父级而言太大时，父级（如果它是弹性项目）必须扩展。但在您的示例中，图像的父级 (div.overflowHidden) 不是弹性项目，它是标准块元素。所以overflow: hidden 工作正常（就像在块示例中一样）。

但是父项的父项是弹性项目。它的默认设置是min-width: auto。并且它不能缩小到其内容（图像）的大小以下。因此，虽然块示例可以始终保留在屏幕上，但 flex 版本会溢出 body / 视口，并占据右边距。

解决方案是覆盖弹性项目上的min-width: auto 默认值。您可以使用：

• min-width: 0

或

• overflow: hidden

更多详情：Why doesn't flex item shrink past content size?

Answer 2

不确定为什么会发生这种情况，但如果您将 .overflowHidden 应用于包装 flex 父级的元素，或者仅将其应用于 flex 父级，则似乎可以工作。

body {
  margin: 400px;
  overflow-x: hidden;
}

.overflowHidden {
  overflow: hidden;
}

.flex {
  display: flex;
  z-index: -1;
  position: relative;
}

<div>
  <div class="overflowHidden">
    <img src="http://lorempixel.com/600/400" />
  </div>
</div>
<div class="flex overflowHidden">
  <div>
    <img src="http://lorempixel.com/600/400" />
  </div>
</div>
<div class="overflowHidden">
  <div class="flex">
    <img src="http://lorempixel.com/600/400" />
  </div>
</div>