I've got a jsfiddle here: https://jsfiddle.net/Lh7qbye2/7/
And a test web page here: https://shetline.com/test/test01.html
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
I can solve the problem for Chrome or Safari by using:
width: fit-content;
...on the outer <div>
, but this doesn't solve the problem for Firefox or Edge. Further, MDN marks fit-content
as an experimental API:
This is an experimental API that should not be used in production code.
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>
Question&Answers:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…