为什么外面的< div>这里不是完全包围内部的< div>吗? [英] Why does the outer <div> here not completely surround the inner <div>?
问题描述
我在这里有一个jsfiddle: https://jsfiddle.net/Lh7qbye2/7/
I've got a jsfiddle here: https://jsfiddle.net/Lh7qbye2/7/
以及此处的测试网页: https://shetline.com/test/test01.html
And a test web page here: https://shetline.com/test/test01.html
问题是这样的:当将包含窗口调整为窄尺寸时，为什么内部<div>的内容不能防止外部<div>缩小到小于内部<div>的宽度?
The question is this: Why doesn't the content of the inner <div> prevent the outer <div> from shrinking to less than the width of the inner <div> when you resize the containing window to a narrow size?
根据我对问题的答案进行更新:
Updates based on the answer I got for the problem:
https://jsfiddle.net/Lh7qbye2/8/
https://shetline.com/test/test02.html
我可以使用以下方法解决Chrome或Safari的问题:
I can solve the problem for Chrome or Safari by using:
width: fit-content;
...在外部<div>上，但这不能解决Firefox或Edge的问题.此外，MDN将fit-content标记为实验API :
...on the outer <div>, but this doesn't solve the problem for Firefox or Edge. Further, MDN marks fit-content as an experimental API:
这是实验性的API，不应在生产代码中使用.
This is an experimental API that should not be used in production code.
外部<div>上的
word-break: break-all有点帮助，但弄乱了所有自动换行.如果我尝试通过在<p>和<button>标记上设置normal断开来补偿，则外部break-all提供的帮助将消失.
word-break: break-all on the outer <div> kinda, sorta, helps, but messes up all word wrap. If I try to compensate by setting normal breaking on the <p> and <button> tags, the help provided by the outer break-all disappears.
让我真正困惑的一件事是，我知道我看到过这样的情况，根本没有溢出问题，而且我不必全力以赴来获得我期望的行为.在这个简化的示例中，我缺少什么错了?
One thing that really confuses me is that I know I've seen situations like this with no spill-over problem at all, and I didn't have to go out of my way to get the behavior I'd expect. What am I missing that's wrong in this simplified example?
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 button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
推荐答案
可以使用inline-block和min-width:100%的组合来完成所需的操作.块元素的宽度是基于其父元素(包含块)定义的，而inline-block宽度是由其内容定义的.
What you want can be done using a combination of inline-block and min-width:100%. A block element has its width defined based on its parent element (containing block) while inline-block will have its width defined by its content.
添加min-width:100%将使其表现为块元素.在这种情况下这不是强制性的，因为您已经有很多内容，所以您一定要覆盖所有宽度:
Adding the min-width:100% will make it behave as block element. it's not mandatory in this case since you already have a lot of content so you are sure to cover all the width:
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 button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
缩小顶部的文本，并且min-width:100%将强制具有全角行为.
Reduce the text on the top and min-width:100% will become mandatory to have full width behavior.
在整个页面上运行代码段
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 button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
<div class="demo" style="min-width:100%;">
<p>Lorem ipsum </p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
来自规范:
正常流程中的块级不可替换元素
Block-level, non-replaced elements in normal flow
其他属性的使用值中必须包含以下约束:
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
请注意内容如何在定义宽度方面不起作用.
'Inline-block'，正常流程中未替换的元素
'Inline-block', non-replaced elements in normal flow
如果"width"为"auto"，则使用的值为收缩至适合宽度"
If 'width' is 'auto', the used value is the shrink-to-fit width
缩小至适合宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度.大致来说:通过格式化内容来计算首选宽度，而不用在没有出现明显换行符的地方换行，还可以计算出首选最小宽度，例如，尝试所有可能的换行符.第三，找到可用宽度:在这种情况下，这是包含块的宽度减去所使用的'margin-left'，'border-left-width'，'padding-left'，'padding-right'， 'border-right-width'，'margin-right'以及任何相关滚动条的宽度
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars
缩小到适合的宽度为:min(max(preferred minimum width, available width), preferred width)
the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width)
请注意如何使用内容来定义宽度.
这同样适用于任何类型的显示值(grid，flex，table等)，技巧是将其替换为等效的inline-*(inline-grid，inline-flex，inline-table等)
The same apply to any kind of display value (grid, flex, table, etc) and the trick is to replace it with the inline-* equivalent (inline-grid, inline-flex, inline-table, etc)
这篇关于为什么外面的< div>这里不是完全包围内部的< div>吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
