Question

在下面的示例中，我要放置ID为child的元素，因此它的右上角与ID为container的元素的右上角匹配。换句话说，希望child伸出container的左侧和底部，并使其右边缘和上边缘与container对齐。

但是，您可以看到child被压缩为与container宽度匹配。但并非完全如此-在第二个示例中，很明显child被压缩到某个极限，然后开始按照期望的方式运行（即相对于container移到左侧）。

有人可以解释这种行为涉及哪些魔力，以及我如何指定child不应压缩到其固有大小以下？

在第三个示例中，我添加了一些压缩性较小的文本，这无疑可以改善这种情况。某种程度上也是flex容器的flex项比常规的块元素具有更高的可压缩性。

  <div id="container" style="position: relative; width: 100px; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
        <div style="display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
      </div>
  </div>
  <hr>
  <div id="container" style="position: relative; width: 50px; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
        <div style="display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
      </div>
  </div>
  <hr>
  <div id="container" style="position: relative; width: 50px; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="white-space: nowrap;">This is just&nbsp;ridiculous</div>
        <div style="
display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
        <div style="display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
      </div>
  </div>

Answer 1

有点棘手的解释，但是绝对元素的缩小匹配行为在控制着元素的宽度。在the specification中，我们有：

缩小到适合的宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度。大致来说：通过设置内容的格式来确定首选宽度，而不是在出现明确的换行符的地方不要换行，还可以计算首选最小宽度，例如，尝试所有可能的换行符。 CSS 2.1并未定义确切的算法。第三，计算可用宽度：通过将“ left”（在情况1中）或“ right”（在情况3中）设置为0后求解“ width”来找到。

然后缩小为适合宽度为：min(max(preferred minimum width, available width), preferred width)。

此处的关键是首选的最小宽度，即最小边界。

为了更好地理解，让我们删除一些属性：

#container {
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:300px;
  }
  to {
    width:50px;
  }
}

<div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex">
          <div style="/*flex: 1 0 auto*/">Long text 1</div>
          <div style="/*flex: 0 0 auto*/">Long text 2</div>
        </div>
  
      </div>
  </div>

您可以清楚地看到绝对元素将如何适合其内容（首选宽度），并且当空间不足时，文本将开始换行，直到达到首选的最小宽度并且元素将停止摆动。这是您的限制。

添加flex属性不会改变任何内容，因为这些属性不会影响其父元素的宽度行为，但他们会考虑该宽度以进行所需的计算（增长，收缩等）

#container {
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:300px;
  }
  to {
    width:50px;
  }
}

<div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex">
          <div style="/*flex: 1 0 auto*/">Long text 1</div>
          <div style="/*flex: 0 0 auto*/">Long text 2</div>
        </div>
  
      </div>
  </div>
  <div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
  
      </div>
  </div>

您可以清楚地注意到，在两种情况下，我们都具有相同的宽度；在第二个示例中，我们只是告诉我们元素不要收缩，因此会产生溢出：

在第三个示例中，通过添加white-space: nowrap;可以简单地增加首选最小宽度，因为您禁用了换行符，因此浏览器将认为首选最小宽度等于首选宽度：

#container {
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:300px;
  }
  to {
    width:50px;
  }
}

<div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex;white-space:nowrap">
          <div style="/*flex: 1 0 auto*/">Long text 1</div>
          <div style="/*flex: 0 0 auto*/">Long text 2</div>
        </div>
  
      </div>
  </div>
  <div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex;white-space:nowrap">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
  
      </div>
  </div>

由于您使用的是flexbox，因此可以调整对齐方式以控制文本的溢出并将其放在左侧：

#container {
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:300px;
  }
  to {
    width:50px;
  }
}

  <div id="container" style="position: relative; height: 100px; left: 50px; border: 1px solid red">
      <div id="child" style="position: absolute; display:flex; flex-direction: column; right: 0px; border: 1px solid blue">
        <div style="
display:flex;justify-content:flex-end;">
          <div style="flex: 1 0 auto">Long text 1</div>
          <div style="flex: 0 0 auto">Long text 2</div>
        </div>
  
      </div>
  </div>

如何指定子对象不应该压缩到其固有大小以下？

问题在于子元素（绝对元素）没有任何内在大小，并且其大小由“缩小适合”算法定义。唯一的方法是确保首选最小宽度足够大，以避免出现任何不必要的收缩（例如使用white-space:nowrap）

防止Flex容器沿横轴溢出

1 个答案: