Question

我正在尝试在包装器中嵌套两个子元素，该包装器指定侧边距，以便在显示狭窄时其内容和屏幕侧面之间有空间，而在显示宽时则max-width之间存在空间。

第二个孩子会有一些溢出，这应该是可见的，而第一个孩子应该严格位于包装器的内容框中。在删除第一个孩子的情况下，第二个孩子的行为符合预期。但是，当我添加第一个孩子时，它似乎完全忽略了包装器的边距，拉伸了包装器的内容框，并破坏了第二个孩子。

在包装器上应用overflow: hidden可以解决边距问题，但会修剪第二个孩子。将边界应用于第一个孩子并不会使其与父对象一起折叠，因为它处于新的块格式上下文中。

到目前为止，我发现的唯一解决方法是：

.wrapper {
    > * {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

并将包装器的最大宽度增加3rem，但我希望有一些解决方案不需要我将包装器的边距转移到其子级。

https://codepen.io/HybridCore/pen/jjoWmd

body {
  background-color: #000;
  color: #FFF;
  display: flex;
  justify-content: center;
}

.wrapper {
  margin: 0 1.5rem;
  max-width: 40rem;
  width: 100%;
}

.fit_content_box {
  display: flex;
  align-items: center;
}

.L {
  min-width: 0;
  flex: 1 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.R {
  margin-left: 1rem;
  height: 1rem;
  width: 1rem;
  background-color: #FFF;
}

.overflow {
  display: flex;
  justify-content: space-between;
}

.overflow>div {
  width: 0;
  display: flex;
  justify-content: center;
}

<body>
  <div class="wrapper">
    <div class="fit_content_box">
      <p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <div class="R"></div>
    </div>

    <div class="overflow">
      <div>
        <p>0</p>
      </div>
      <div>
        <p>12</p>
      </div>
      <div>
        <p>24</p>
      </div>
    </div>
  </div>
</body>

Answer 1

问题的根源似乎是white-space: nowrap，它被应用于第一个子项（.L）内的内容元素（.fit_content_box）。

.L {
    border: solid 1px #FF0000;
    min-width: 0;
    flex: 1 0;
    overflow: hidden;
    white-space: nowrap;    <--- trouble maker
    text-overflow: ellipsis;
}

如果您删除该行代码，则.wrapper上的边距将按预期工作。

所以关键问题是：

为什么孙子（white-space）的.L属性会使祖父母（.wrapper）的边距塌陷？
当white-space属性应用于父级（.fit_content_box时，为什么overflow属性不会折叠？
为什么将.wrapper属性应用到祖父母（visible）时，其值为.L以外的值，却使利润率保持对子孙子女的稳定（public static int diagonalDifference(List<List<Integer>> arr) { List<int[]> arrList = new ArrayList<int[]>(); for (List<Integer> dim1:arr) { int[] dim1Array = new int[dim1.size()]; for (int i=0;i<dim1Array.length;i++) dim1Array[i] = dim1.get(i); //performs autoboxing from Integer to int arrList.add(dim1Array); } int[][] data = arrList.toArray(new int[arrList.size()][]); //TODO perform your operation on int[][] return result; }）？

您写道：

将边界应用于第一个孩子并不会使其与父对象一起折叠，因为它处于新的块格式上下文中。

实际上，这不是常规保证金崩溃的问题，因为：

我们正在谈论水平边距，horizontal margins never collapse和
我们正在一个flex容器和margins inside a flex container never collapse中工作。

因此，尽管对问题的完全理解可能在于块（或flex）格式设置上下文中，但我不确定这就是为什么父项上的边距不会崩溃的原因。

据我所知。有空的时候我会做更多的研究。或者也许其他人可以从这里拿起它。

Answer 2

您主要有两个问题：

您正在将width:100%设置为包装器，并且这没有考虑边距，因此逻辑上您将发生溢出，并且由于主体是带有justify-content:center的弹性容器，因此边距将从两侧均等地溢出这就是为什么您认为它不适用的原因。
您正面临the min-width constraint of flexbox，这迫使您设置width:100%认为这是很好的解决方案

要解决此问题，您需要从包装器中删除width:100%并考虑在其上使用min-width:0。您还可以删除应用于min-width的{{1}}，并且需要考虑.L上的flex-shrink:0（或将其宽度替换为.R）

min-width

body {
  background-color: #000;
  color: #FFF;
  display: flex;
  justify-content: center;
}

.wrapper {
  margin: 0 1.5rem;
  max-width: 40rem;
  min-width:0;
}

.fit_content_box {
  display: flex;
  align-items: center;
}

.L {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.R {
  margin-left: 1rem;
  flex-shrink:0;
  height: 1rem;
  width: 1rem;
  background-color: #FFF;
}

.overflow {
  display: flex;
  justify-content: space-between;
}

.overflow>div {
  width: 0;
  display: flex;
  justify-content: center;
}

为了更好地说明（1），这是另一个几乎没有引起注意的边距溢出示例：

<body>
  <div class="wrapper">
    <div class="fit_content_box">
      <p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <div class="R"></div>
    </div>

    <div class="overflow">
      <div>
        <p>0</p>
      </div>
      <div>
        <p>12</p>
      </div>
      <div>
        <p>24</p>
      </div>
    </div>
  </div>
</body>

.container {
  width:200px;
  margin:auto;
  display:flex;
  justify-content:center;
}
.box {
  height:50px;
  width:100%;
  background:red;
}

您会看到我们有一个长文本，迫使我们的元素不缩小（最小宽度约束），该元素占据了整个宽度，并且我们使内容居中。这将使边距像没有边距一样溢出。

如果您违反一条规则，那么您将看到边距的效果。

删除长文本：

<div class="container">
  <div class="box" style="margin:0 5966px">a_long_text_to_avoid_the_shrink</div>
</div>

<div class="container">
  <div class="box">a_long_text_to_avoid_the_shrink</div>
</div>

.container {
  width:200px;
  margin:auto;
  display:flex;
  justify-content:center;
}
.box {
  width:100%;
  height:50px;
  background:red;
}

删除中心点：

<div class="container">
  <div class="box" style="margin:0 5966px">a long text to avoid the shrink</div>
</div>

<div class="container">
  <div class="box">a long text to avoid the shrink</div>
</div>

.container {
  width:200px;
  margin:auto;
  display:flex;
}
.box {
  width:100%;
  height:50px;
  background:red;
}

每边留出不同的边距

<div class="container">
  <div class="box" style="margin:0 5966px">a_long_text_to_avoid_the_shrink</div>
</div>

<div class="container">
  <div class="box">a_long_text_to_avoid_the_shrink</div>
</div>

.container {
  width:200px;
  margin:auto;
  display:flex;
  justify-content:center;
}
.box {
  width:100%;
  height:50px;
  background:red;
}

在包装器上应用<div class="container"> <div class="box" style="margin:0 500px 0 400px">a_long_text_to_avoid_the_shrink</div> </div> <div class="container"> <div class="box">a_long_text_to_avoid_the_shrink</div> </div>可以解决边距问题，但会修剪第二个孩子。

这部分解决了该问题，因为溢出的行为与overflow: hidden相同。

Flexbox子级具有“溢出：隐藏”的祖父母边距

2 个答案: