CSS prevent div flex from stretching child

試著忘記壹切 提交于 2020-12-20 10:14:00

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!