flex布局下如何固定两个div间距 不受内部文本长度影响

我将两个div设置为flex-direction: row横向排列，二者之间设置gap: 70px，效果如下图所示：

初始显示的日期为8/12/22，但当日期修改为12/12/22时，由于日期多了一位数字，日期模块与步数统计模块两个div之间的间距会轻微增大，影响布局一致性。
现有实现代码如下：

JSX #

<div className="DataAreaParent">
  <div className="DataParent">
    <span id="XAxisData" className="SpanText"></span>
    <b className="BoldText">{props.xAxis} </b>
  </div>
  <div className="DataParent">
    <span id="YAxisData" className="SpanText"></span>
    <b className="BoldText">{props.yAxis}</b>
  </div>
</div>

CSS #

.DataAreaParent {
  display: flex;
  flex-direction: row;
  gap: 70px;
  margin: auto;
  padding: 10px 30px 10px 30px;
}

.DataParent {
  display: flex;
  flex-direction: column;
}

.BoldText {
  color: gray;
}

.SpanText {
  font-size: 1.5rem;
  font-weight: bolder;
}

问题原因 #

gap: 70px本身是正常生效的，视觉上出现间距变化的核心原因是flex子项.DataParent默认会随内容长度自适应尺寸，没有做固定宽度限制：当日期文本从单数字月份变为双数字月份，第一个.DataParent的内容宽度增加，模块的视觉边界发生偏移，就会产生间距变大的错觉。

修复方案 #

给两个.DataParent设置统一的固定宽度，同时禁止flex子项被压缩，就能保证无论内容长度怎么变，两个模块的间距始终固定：

.DataParent {
  display: flex;
  flex-direction: column;
  /* 新增规则 */
  width: 120px; /* 宽度值按需调整，保证能容纳最长的日期文本即可 */
  flex-shrink: 0; /* 禁止子项随父容器空间变化被压缩 */
}
/* 可按需给文本设置对齐规则，比如数字类内容居中/右对齐视觉效果更统一 */
.SpanText {
  font-size: 1.5rem;
  font-weight: bolder;
  text-align: center; /* 可根据设计需求调整为left/right */
}

如果不想写死固定宽度，也可以去掉gap，改用子项外边距控制间距，同时给子项设置flex: 0 0 auto让其尺寸完全跟随内容但不被flex布局拉伸压缩：

.DataAreaParent {
  display: flex;
  flex-direction: row;
  /* 删除gap: 70px */
  justify-content: flex-start;
  margin: auto;
  padding: 10px 30px 10px 30px;
}
.DataParent {
  display: flex;
  flex-direction: column;
  /* 新增规则 */
  flex: 0 0 auto;
  margin-right: 70px;
}
/* 最后一个子项取消右边距 */
.DataParent:last-child {
  margin-right: 0;
}

优先推荐第一种固定宽度+禁止收缩的方案，适配性更强，不会受父容器宽度变化影响，能100%保证间距固定。

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