Flexbox布局中如何让带max-width的子元素始终撑满最大宽度？

在Flexbox容器内，我有一个设置了max-width的div，其内部包含长短不一的标题。我希望即使标题内容较短时，该div也能扩展至max-width（而非收缩至子元素的宽度）。请问无需使用断点是否可以实现？我已尝试过max-width与width、min-width的多种组合，但均未成功。

相关代码示例：

示例1 #

.row {
    display: flex;
    align-items: center; /* 垂直居中元素 */
    background-color: yellow;
    height: 100vh;
}

.column {
    max-width: 400px;
    background-color: red;
    flex-grow: 1;
}

<div class="row">
    <div class="column">Text</div>
</div>

示例2 #

.row {
  display: flex;
  align-items: center
}

.column {
  max-width: 90rem;
  background-color: red; /* 原代码拼写错误：background-colour → background-color */
}

<div class="row">
  <div class="wrapper">
    <div class="column">Text</div>
  </div>
</div>

可以实现，核心是让目标div优先占据到max-width设定的宽度，仅在容器空间不足时收缩，而非根据内容宽度调整。以下是两种可行方案：

方案1：Flex属性组合 #

给.column设置flex: 1 0 auto，配合max-width即可实现需求：

.row {
    display: flex;
    align-items: center;
    background-color: yellow;
    height: 100vh;
}

.column {
    max-width: 400px;
    background-color: red;
    flex: 1 0 auto;
}

• flex-grow: 1：当容器宽度大于内容宽度时，让div占据剩余空间，直到触达max-width限制。
• flex-shrink: 0：禁止div因内容过短而收缩到内容宽度。
• max-width：限制div的最大宽度，避免超出设定值。

方案2：宽度函数直接定义 #

使用width: min(100%, 你的max-width值)，无需依赖Flex属性也能实现：

.column {
    max-width: 400px;
    width: min(100%, 400px);
    background-color: red;
}

这个设置会让div在容器宽度大于max-width时，直接扩展到max-width；容器宽度小于max-width时，占满容器宽度，同时不会因内容过短收缩。

针对嵌套结构（示例2）的调整 #

如果保留.wrapper嵌套，需要先让.wrapper占满Flex容器的可用空间，再给.column设置宽度：

.row {
  display: flex;
  align-items: center;
}

.wrapper {
  flex: 1; /* 让wrapper占满row的可用空间 */
}

.column {
  max-width: 90rem;
  width: min(100%, 90rem);
  background-color: red;
}

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