Question

我正努力让flexbox布局与边距和display:flex一起使用。

我整合的轮播组件使用此方法进行响应，但只要将margin应用于父级，overflow: hidden和body { margin: 400px; } .overflowHidden { overflow: hidden; } .flex { display: flex; }属性就会被忽略为如下例所示。

顶级版本没有嵌套在Flexbox中，而下面的版本就是，并且不尊重父级的边距。

此问题在下面的代码和此Plunker中得到了证明。 http://plnkr.co/edit/qU1oq1Vq1X3FQMWLJiQk?p=preview

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

Answer 1

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

＆＃13;

body {
  margin: 400px;
  overflow-x: hidden;
}

.overflowHidden {
  overflow: hidden;
}

.flex {
  display: flex;
  z-index: -1;
  position: relative;
}

＆＃13;

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

＆＃13;

Answer 2

以下是解决方案：

.flex > div { overflow: hidden }

revised demo

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

默认情况下，非flex div容器有display: block。

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

父母divs和他们的边缘保持稳定和不受干扰。

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

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

这里的关键信息是：

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

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

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

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

min-width: 0

OR

overflow: hidden

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

Flexbox防止边缘被尊重

2 个答案: