使 flex 子项获取其内容的宽度，而不是父容器的宽度 [重复]

Question

我正在使用 flex 进行样式设置，但子元素的宽度存在问题。在我的 JS Fiddle 示例中，如果您查看“灵活取消”药丸徽章......右侧有很多空白空间。如何更新 flex 样式以使药丸徽章的宽度没有这个额外的空白？看来这个子元素的宽度正在延伸到其父元素的整个宽度...

JS 小提琴：https://jsfiddle.net/a76bdLvp/1/

代码重点领域（来自 JS Fiddle）：

.left-column {
   padding: 12px 12px 12px 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   -webkit-box-flex: 1;
   flex: 1 1 0px;
}

.pill-badge {
   margin-bottom: 4px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

当前结果

期望的结果

我查看了这个例子，它看起来非常相似......但是应用这个解决方案（或 inline-flex 到孩子）没有工作。非常感谢您的帮助！

Make flex items take content width, not width of parent container

Answer 1

将max-width: fit-content; 添加到pill-badge-btn

.main-wrapper {
  width: 375px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgb(192, 202, 213);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(192, 202, 213);
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 8%) 0px 0px 2px 0px, rgb(0 0 0 / 16%) 0px 1px 4px 0px;
  cursor: pointer;
  margin: 16px 0px;
}

.flex-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
}

.left-column {
  padding: 12px 12px 12px 16px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex: 1 1 0px;
}

.right-column {
  padding: 8px 8px 8px 12px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  flex-direction: column;
  -webkit-box-flex: 1.25;
  flex: 1.25 1 0px;
}

.pill-badge {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.pill-badge-btn {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 8px;
  background-color: rgb(232, 242, 255);
  border-radius: 10px;
  color: rgb(0, 68, 153);
  font-size: 10px;
  text-align: left;
  max-width: fit-content;
}

button {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  border-radius: 2px;
  border-width: 0px;
  border-style: solid;
  font-size: 12px;
  padding: 7px 12px;
  background-color: rgb(0, 170, 0);
  color: rgb(255, 255, 255);
  width: 100%;
  margin-top: 0px;
  position: relative;
}

<div class="main-wrapper">
<div class="flex-container">
<div class="flex-wrapper">
<div class="left-column">
  <div class="pill-badge">
    <div class="pill-badge-btn">
      Text
    </div>
    <div class="pill-badge-btn">
      Flexible Cancellation
    </div>
  </div>
</div>
<div class="right-column">
  <button>
  Choose Me
  </button>
</div>
</div>
</div>
</div>