html - 防止子div继承父宽度

Question

我有一个带有边框的子 div，它应该只包裹尽可能多的文本。但是，它似乎继承了父 div 的宽度。

示例:https://jsfiddle.net/xstaf3cc/

<div class="contentContainer">
  <div>Title</div>
  <div>Posted by u/user1</div>
  <div class="text">
    Text
  </div>
</div>

.contentContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 15;
}

.text {
    border: 1px solid black;
}

如何让'Text'的宽度不继承其父div的宽度？我希望它的宽度与文本一样长。

Answer 1

在 contentContainer div 上使用 align-items: flex-start; 样式

 
.contentContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  align-items: flex-start;
}

.text {
  border: 1px solid black;
}

<div>
  <div class="contentContainer">
<div>
  <div>Title</div>
  <div>Posted by u/user1</div>
</div>  
<span class="text">
  Text
</span>
  </div>
</div>