html - 如何阻止 flex 拉伸(stretch)到 100% 宽度？

Question

我有一个部分有 2 列被拉到 flexbox 的中心，但无论出于何种原因，容器不会水平环绕它们，而是填满整个页面。

我该怎么做才能使该部分环绕文本(预期填充为 1rem)？

body {
  background-color: #444;
  color: white;
}

section {
  border-style: solid;
  border-image: linear-gradient(to top right, goldenrod 0%, transparent 25%, transparent 75%, goldenrod 100%) 2;
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  width: auto;
}

section>div {
  display: flex;
  flex-direction: column;
}

section>div:first-child {
  border-right: 2px solid goldenrod;
  padding-right: 1rem;
  align-items: flex-end;
}

section>div:not(:first-child) {
  padding-left: 1rem;
}

<section>
  <div>
    <p>Line First</p>
    <p>Line Second</p>
  </div>
  <div>
    <p>Line First</p>
    <p>Line Second</p>
  </div>
</section>

JSFiddle: https://jsfiddle.net/mjp1qozs/3/

Answer 1

max-width: fit-content;

和

一样好用

display: inline-flex;

如果你不需要另一个max-with(也是fit-content is partially supported)，请先使用

如果 inline 元素适合您的情况，则使用第二个