问题
The moment div has the flex
display property it stretches the paragraph. I seem to be missing something but no property I can think to put on the flex div changes this. How can I prevent this behavior? (without the flex property I get the result on the right in the image)
div {
display: flex;
justify-content: center;
flex-direction: column;
height: 200px;
width: 100px;
}
p {
background-color: green;
display: inline;
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
回答1:
add another wrapper:
div {
display: flex;
justify-content: center;
flex-direction: column;
text-align:center;
height: 200px;
width: 100px;
}
p span{
background-color: green;
}
<div>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</p>
</div>
Related question to understand why your inline
is ignored:
Are flex items a block level element?
Usage of display property of flex box items
回答2:
span {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
background-color: green;
}
div {
text-align:center;
height: 200px;
width: 100px;
}
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</span>
</div
来源:https://stackoverflow.com/questions/63315542/css-prevent-div-flex-from-stretching-child