时间戳

首页 > 解决方案 > 防止孩子拉伸父容器

html - 防止孩子拉伸父容器

问题描述

我有一个带有两个孩子的固定位置容器元素。两个孩子都包含文本。我希望其中一个孩子动态设置容器的宽度及其内容。我希望其他孩子的文本根据该宽度适当换行。

例如：

.container {
  position: fixed;
}

.wrap {
  background: red;
}

.stretch {
  background: green;
}
<div class="container">
  <div class="wrap">
    this text is very very long
  </div>
  <div class="stretch">
    shorter text
  <div>
</div>

在此示例中，我希望容器的宽度与较短的 green 匹配.stretch div。我希望红色.wrap div具有相同的宽度，其中包含文本，例如：

r

标签： htmlcssword-wrap

解决方案

我想出的解决方案是：

  • 孩子div需要拉伸它的宽度取决于它的内容->max-content
  • 父母的宽度需要尽可能缩小取决于它的内容- >min-content

具有变体行为的解决方案代码： 

.container {
  width: min-content;
  
  border: 2px solid blue;
  margin: 5px;
}

.wrap {
  background: red;
  width: auto; /* default btw */
}

.stretch {
  background: green;
  width: max-content;
}
<div class="container">
  <div class="wrap">
    this text is very very long
  </div>
  <div class="stretch">
    shorter text
  </div>
</div>

<div class="container">
  <div class="wrap">
    shorter
  </div>
  <div class="stretch">
    shorter text
  </div>
</div>

<div class="container">
  <span class="wrap">
    shorter
  </span>
  <div class="stretch">
    shorter text
  </div>
</div>

您可以从此答案或规范中阅读有关 min-content 和 max-content 的更多信息。

  • max-content 内联尺寸：如果没有采用盒子内的软包装机会，则在适合其内容时可以采用的最窄 内联尺寸。

  • min-content inline size：一个盒子可以采用的最窄的 inline 大小，不会导致inline-dimension 溢出，这可以通过选择更大的inline size来避免。粗略地说，如果盒子内的所有软包装机会都被采用，将适合其内容的内联尺寸。

推荐阅读