Flex container (direction: column, wrapping) is smaller than width of children

Question

I have a simple container with children.

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

The children are inline, to be the width of their content.
The container lays out children in column, wrapping children into columns after it hits a fixed height

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

.container p {
  display: inline;
}

I would expect that the container would "contain" all the children. ie: its width (and the pink background) would extend to contain all the columns in which the children are laid out. That isn't happening though, the width of the container is just the width of the first column. How do I do that?

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

Codepen here: https://codepen.io/bhaviksingh/pen/qBZyegO

Answer 1

You should set your flex-direction as columns to achied the desired effect.

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>