Flex容器方向：列，包裹小于子代的宽度

问题描述

我有一个带孩子的简单容器。

<div class="container">
  <p> long multiline content </p>
  <p> long multiline content </p>
  <p> long multiline content </p>
</div>

孩子们是内联的，就是他们内容的宽度。
容器将孩子放在列中，在达到固定高度后将孩子包裹成列

.container {
  background: pink;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap
}

.container p {
  display: inline;
}

我希望容器会“包含”所有孩子。即：其宽度（和粉红色的背景）将扩展为包含所有放置子项的列。但这并没有发生，容器的宽度只是第一列的宽度。我该怎么办？

Image of result - where the pink background isn't extending to child width

此处的Codepen： https://codepen.io/bhaviksingh/pen/qBZyegO

解决方法

您应将弹性方向设置为列，以达到所需的效果。

Example of what you did

Example of flex direction row

.container {
  background: pink;
  display: inline-flex;
  height: 200px;
  flex-direction: row;
  flex-wrap: wrap
}

.container p {
  display: inline;
}

<div class="container">
 <p> 
    Paragraph 1 <br/>
    One two three <br/> 
    Four five six <br/>
    Seven eight nine <br/>
 </p>
  <p> 
    Paragraph 2 <br/>
    One two three <br/> 
    Four five six <br/>
    Seven eight nine <br/>
 </p>
 <p> 
    Paragraph 3 <br/>
    One two three <br/> 
    Four five six <br/>
    Seven eight nine <br/>
    Ten eleven twelve
 </p>
 <p> 
    Paragraph 4 <br/>
    One two three <br/> 
    Four five six <br/>
    Seven eight nine <br/>
 </p>
   <p> 
    Paragraph 5 <br/>
    One two three <br/> 
    Four five six <br/>
    Seven eight nine <br/>
    Ten eleven twelve <br/>
    Thirteen fourteen fifteen <br/>
 </p>
  
</div>