html - CSS防止div flex拉伸(stretch) child

Question

当 div 具有 flex 显示属性时，它会拉伸(stretch)段落。我似乎遗漏了一些东西，但我认为放在 flex div 上的任何属性都无法改变这一点。我怎样才能防止这种行为？ (没有 flex 属性我得到图像右侧的结果)

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>

Answer 1

添加另一个包装器:

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>

了解为什么您的 inline 被忽略的相关问题:

Are flex items a block level element?

Usage of display property of flex box items