CSS 防止 div flex 拉伸子元素

Question

当 div 具有flex显示属性时，它会拉伸段落。我似乎遗漏了一些东西，但我认为放在 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被忽略的相关问题：

Flex 项目是块级元素吗？

弹性框项目的显示属性的使用