如何让弹性容器占据其元素的空间？ [复制]

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

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