如何让flex容器占用其元素的空间？

Question

我希望有一个包含两行的框，使用flexbox。我无法解决的问题是容器占据了页面的整个宽度，而不是紧紧适应元素：

.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>

应该设置什么才能使容器只是元素的宽度？我知道我可以强制它width，但我希望它能够被元素的内容驱动。

Answer 1

您正在寻找inline-flex

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;