How to have a flex container take the space of its elements?

Question

I would like to have a box with two rows, using flexbox. The problem I cannot resolve is that the container is taking the full width of the page instead of tightly adapting to the elements:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-style: solid;
}

.header {
  background-color: black;
  color: white;
}

.body {
  background-color: blue;
  color: white;
}

<div class="container">
  <div class="header">
    the header
  </div>
  <div class="body">
    the body
  </div>
</div>

What should be set so that the container is just the width of the elements? I know that I could force its width but I would like it to be rather driven by the content of the elements.

score 4 · Accepted Answer · answered Jun 22 '17 at 13:48

4

You're looking for inline-flex

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

.container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border-style: solid;
}

.header {
  background-color: black;
  color: white;
}

.body {
  background-color: blue;
  color: white;
}

<div class="container">
  <div class="header">
    the header
  </div>
  <div class="body">
    the body
  </div>
</div>

answered Jun 22 '17 at 13:48

Michael Coker

52,626
5
64
64

2

Thank you. I was not aware of such a `display`at all. A concise explanation, as part of a question about this: https://stackoverflow.com/a/27459204/903011 – WoJ Jun 22 '17 at 13:51
@WoJ you're welcome. – Michael Coker Jun 22 '17 at 13:54

How to have a flex container take the space of its elements?

1 Answers1