Как остановить изгиб от растяжения до 100% ширины?

Question

У меня есть секция с двумя столбцами, расположенными по центру во 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

С display: inline-flex, как предлагается в комментариях выше, вы получаете желаемое поведение сжатия, но вы также теряете горизонтальное центрирование.Таким образом, вы решаете одну проблему, но создаете другую.

Вместо этого просто сделайте родительский контейнер гибким контейнером с justify-content: center.Это решает обе проблемы всего двумя строками кода.

body {
  display: flex;           /* new */
  justify-content: center; /* new */
  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>

Answer 2

Ответ должен был изменить display на inline-flex. Спасибо, Темани Афиф!