这里有一个jsfiddle:https://jsfiddle.net/lh7qbye2/7/
和以下测试网页:https://shetline.com/test/test01.html
问题是:当您将包含窗口的大小调整为较窄的大小时，为什么内部 基于我得到的问题答案的更新: https://jsfiddle.net/lh7qbye2/8// https://shetline.com/test/test02.html ； 我可以使用以下方法来解决Chrome或Safari的问题: 。。。在外部的 这是一个实验性API，不应该在生产代码中使用。 真正让我困惑的一件事是，我知道我见过这样的情况，根本就没有溢出问题，而且我不需要刻意去做我所期望的事情。 在这个简化的示例中，我遗漏了哪些错误？ ； null null
使用 添加 null
您需要使用 也就是说，由于您对 null的内容不能防止外部
缩小到小于内部
的宽度？
宽度:fit-content；上，但这不能解决Firefox或Edge的问题。 此外，MDN将
fit-content标记为实验性API:断字:外层的全部断字有点帮助，但把所有的自动换行都搞乱了。 如果试图通过在
和标记上设置normal中断来进行补偿，则外部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 button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
共2个答案
匿名用户
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 button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
匿名用户
flex-wrap:wrap；将内容拆到下一行。按钮使用固定宽度，这是您在较小屏幕中的最佳选择。body {
margin: 4em;
}
.demo {
background-color: #BFC;
box-sizing: border-box;
margin: 0;
padding: 1em;
position: relative;
}
.demo p:first-child {
margin-top: 0;
}
.other-stuff {
align-items: center;
display: flex;
flex-wrap: wrap;
}
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>
相关问题
元素的宽度和高度为100px；填充、边距和边框设置为0px；为什么它仍然偏移？
