时间戳

首页 > 解决方案 > 为什么外

这里没有完全包围内部
?

html - 为什么外
这里没有完全包围内部
?

问题描述

我在这里有一个 jsfiddle：https ://jsfiddle.net/Lh7qbye2/7/

还有一个测试网页：https ://shetline.com/test/test01.html

问题是这样的：当您将包含窗口的大小调整为窄尺寸时，为什么内部的内容不能<div>阻止外部<div>缩小到小于内部的宽度？<div>

内部 div 转义外部 div 的示例图像

根据我得到的问题答案更新：

https://jsfiddle.net/Lh7qbye2/8/

https://shetline.com/test/test02.html

 

我可以使用以下方法解决 Chrome 或 Safari 的问题：

width: fit-content;

...在外部<div>，但这并不能解决 Firefox 或 Edge 的问题。此外，MDN 标记fit-content为实验性 API：

这是一个实验性 API，不应在生产代码中使用。

word-break: break-all在外部<div>有点，排序，帮助，但弄乱了所有的自动换行。如果我尝试通过在and标记上设置normal中断来进行补偿，外部提供的帮助就会消失。<p><button>break-all

真正让我感到困惑的一件事是，我知道我已经看到过这样的情况，根本没有溢出问题，而且我不必竭尽全力获得我所期望的行为。在这个简化的例子中，我错过了什么？

 

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  /* width: fit-content; // With this it works for Chrome or Safari, but not for Firefox or Edge. */
  /* word-break: break-all; // For some reason this sort of helps too, but of course messes up all word wrapping. */
  /* If I try to apply "word-break: normal" to <p> and <button> tags to compensate, the inner <div> leaks out again. */
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  background-color: #AEB;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>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="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

标签： htmlcss

解决方案

你想要的可以使用 和 的组合来inline-block完成min-width:100%。块元素的宽度基于其父元素（包含块）定义，而inline-block宽度则由其内容定义。

添加min-width:100%将使其表现为块元素。在这种情况下它不是强制性的，因为您已经有很多内容，所以您一定要覆盖所有宽度：

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
  min-width:100%;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>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="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

减少顶部的文本，并且min-width:100%必须具有全宽行为。

在整页上运行代码段

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

<div class="demo" style="min-width:100%;">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

从规范：

正常流程中的块级、非替换元素

在其他属性的使用值中必须保持以下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

请注意内容在定义宽度时没有任何作用。

'Inline-block'，正常流程中的非替换元素

如果 'width' 是 'auto'，则使用的值是收缩到适合的宽度

缩小以适应宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容而不换行来计算首选宽度，除非出现显式换行，还可以计算首选最小宽度，例如，通过尝试所有可能的换行。第三，找到可用的宽度：在这种情况下，这是包含块的宽度减去'margin-left'、'border-left-width'、'padding-left'、'padding-right'的使用值， “border-right-width”、“margin-right”以及任何相关滚动条的宽度

收缩到适合的宽度是：min(max(preferred minimum width, available width), preferred width)

请注意内容如何用于定义宽度。

这同样适用于任何类型的显示值（grid、flex、table等），诀窍是用inline-*等效的（inline-grid、inline-flex、inline-table等）替换它

推荐阅读