如何自动缩放flexbox（列）的宽度

Question

背景

我想自动缩放第二列的宽度而不是整个宽度，但是当父级为inline-flex时，它将不起作用。

.parent {
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  background-color: red;
  width: 100%;
  color: white;
}

.child {
  display: inline-block;
  background-color: blue;
}

<div class="parent">
  <div>first column</div>
  <div class="child">second column</div>
</div>

---

如果我将其更改为inline-block，它将自动缩放宽度。有人知道它是如何工作的吗？

.parent {
  text-align: left;
  display: inline-block;
  /* display: inline-flex; */
  flex-direction: column;
  background-color: red;
  width: 100%;
  color: white;
}

.child {
  display: inline-block;
  background-color: blue;
}

<div class="parent">
  <div>first column</div>
  <div class="child">second column</div>
</div>