Flexbox 防止边距被尊重

Question

我正在努力让 flexbox 布局与边距和 overflow: hidden 一起工作。

我正在集成的轮播组件使用此方法进行响应，但一旦将 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

不确定为什么会发生这种情况，但如果将 .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>

Answer 2

解决方法如下：

.flex > div { overflow: hidden }

revised demo

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

non-flex div 容器默认有 display: block。

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

parent div 及其边际保持稳定和不受干扰。

然而，在 flex formatting context 中行为是不同的。

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

这里的关键信息是：

When you apply display: flex or display: inline-flex to an element it becomes a flex container and its children become flex items. By default, flex items cannot be smaller than the size of their content. They have a default setting of min-width: auto.

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

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

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

min-width: 0

或

overflow: hidden

此处有更多详细信息：

Flexbox 防止边距被尊重

Flexbox preventing margins from being respected

html

css

margin

flexbox