CSS：fit-content遇文本换行时无法适配真实内容的问题求解

问题描述 #

我有一个宽度固定为20em、flex-direction: row的容器，需要放置三个元素：

• 包含菜品名称的文本元素
• 占据剩余空间且最小宽度为主容器10%的点线元素（连接菜品名称与价格）
• 包含菜品价格的文本元素

对应的初始HTML/CSS代码如下：

HTML代码 #

<div class="container">
  <div class="dish">Creamy Mushroom Risotto with Parmesan</div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>

CSS代码 #

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
}

.dish {
  width: fit-content;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
}

当前问题：当菜品名称元素换行时，点线元素无法占据全部剩余空间，布局异常。

可行解决办法 #

方案1：调整flex元素的收缩与对齐属性 #

修改.dish和.dots的CSS：

.dish {
  flex-shrink: 0; /* 禁止菜品名称被压缩 */
  margin-right: 0.5em; /* 给点线预留基础间距 */
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
  align-self: flex-start; /* 让点线顶部对齐菜品名称第一行 */
}

原理：flex-shrink: 0确保菜品名称保持自身宽度，不会被flex容器挤压；align-self: flex-start让点线从菜品名称的顶部开始延伸，即使菜品名称换行，也能填满剩余的全部空间。

方案2：改用Grid布局实现精准控制 #

将容器切换为Grid布局，直接定义列的分配规则：

.container {
  display: grid;
  grid-template-columns: auto minmax(10%, 1fr) auto;
  align-items: center;
  width: 20em;
  border: 1px solid black;
  gap: 0.5em; /* 元素间的间距 */
}

.dots {
  border-top: 1px dotted black;
}

原理：grid-template-columns: auto minmax(10%, 1fr) auto让中间的点线元素自动占据菜品名称和价格之外的剩余空间，同时保证最小宽度为容器的10%，天然适配菜品名称换行的场景。

方案3：限制菜品名称的最大宽度 #

通过给菜品名称设置最大宽度，避免其过度挤压点线空间：

.dish {
  max-width: 70%; /* 根据实际需求调整比例 */
  white-space: normal;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
}

原理：强制菜品名称在达到指定宽度后换行，预留出足够空间给点线和价格元素，确保点线能正常占据剩余区域。

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