程序员经验分享-hwhale

为什么这里的外部
没有完全包围内部
？

2023-12-22

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

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

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

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

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

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

 

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

width: fit-content;

...在外面<div>，但这并不能解决 Firefox 或 Edge 的问题。此外，MDN 标记fit-content as an 实验性API https://developer.mozilla.org/en-US/docs/Web/CSS/width:

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

word-break: break-all在外面<div>有点，有点，有帮助，但搞乱了所有的自动换行。如果我尝试通过设置来补偿normal打破在<p> and <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>

你想要的可以通过组合来完成inline-block and 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%将强制具有全宽度行为。

Run the snippet on full page

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>

From 规格 https://www.w3.org/TR/CSS21/visudet.html:

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

其他属性的使用值必须满足以下约束：

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

Note how the content play no role in defining the width.

“内联块”，正常流程中的非替换元素

如果“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)

Note how the content is used to define the width.

这同样适用于任何类型的显示值（grid, flex, table等），诀窍是将其替换为inline-*相等的 （inline-grid, inline-flex, inline-table, etc)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

为什么这里的外部
没有完全包围内部
？ 的相关文章

随机推荐

热门标签