如何让Flex子元素宽度一致且适配内容？

我的场景 #

我有两个Flex容器：难度选项组和最高分选项组。需求如下：

• 「easy」「medium」「hard」三个按钮宽度需完全相同，且以内容最长的「medium」按钮宽度为准自适应。
• 底部的分数按钮组需遵循同样逻辑：所有按钮宽度一致，因内容更短，整体宽度应更小。

当前Flex容器样式：

display: flex;
flex-wrap: wrap;

Flex子元素采用默认flex值，设置了固定高度，宽度为auto。

已尝试的方案 #

方案一：flex-basis与flex-grow #

给子元素设置：

flex-basis: 0;
flex-grow: 1;

问题：换行后的子元素会占满容器整宽，且顶部难度按钮宽度不一致。

方案二：硬编码flex-basis #

给所有子元素设置flex-basis: 90px（适配「medium」按钮的宽度），虽能让同组按钮宽度一致，但固定宽度无法自适应内容，导致分数按钮组需要分三行显示，而非预期的两行。

方案三：max-width #

给子元素添加以下样式：

max-width: 90px;
flex-basis: 0;
flex-grow: 1; 

正常屏幕宽度下表现符合预期，但屏幕宽度缩小时，按钮宽度开始出现不一致：比如分数组的「200」按钮比其他按钮宽，难度组的「medium」按钮比「easy」「hard」宽。

我的代码 #

CSS #

.flex-col,
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.button {
  border-style: solid;
  padding: 4px;
}

.parent {
  height: auto;
  width: auto;
}

HTML #

<div class="parent flex-col">
  <div class="flex-col">
    <div class="flex-row">
      DIFFICULTY
    </div>
    <div class="flex-row">
      <div class="button">EASY</div>
      <div class="button">MEDIUM</div>
      <div class="button">HARD</div>
    </div>
  </div>
  <div class="flex-col">
    <div class="flex-row">
      MAX SCORE
    </div>
    <div class="flex-row">
      <div class="button">50</div>
      <div class="button">75</div>
      <div class="button">100</div>
      <div class="button">150</div>
      <div class="button">200</div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Alon Emanuel