如何使<p>匹配父容器宽度且不影响父容器，实现平滑宽度动画

问题描述 #

为优化动画流畅度，将.long类<p>元素的width从0改为100%，但折叠状态下该元素会撑开父容器宽度（动画过程表现正常）。目标是实现：要么让width:100%不影响父容器宽度，要么在折叠状态使用可用宽度作为动画起始值而非0。

最小复现示例（仅Chromium浏览器支持calc-size）：

.parent {
  display: flex;
  align-items: start;
}

.item {
  display: flex;
  flex-direction: column;
  background: orange;
}

p {
  box-sizing: border-box;
  overflow: hidden;
}

.long {
  width: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    width 3s,
    opacity 3s;
}

.item:hover .long {
  height: 1.5rem;
  width: calc-size(auto, size);
  opacity: 1;
}

<div class="parent">
  <div class="item">
    <p>Good test.</p>
    <p class="long collapsed">Yappity yap yap yap.</p>
  </div>
</div>

解决方案 #

方案一：用max-width控制折叠/展开（推荐） #

通过max-width替代width实现动画，避免折叠状态下撑开父容器：

.parent {
  display: flex;
  align-items: start;
}

.item {
  display: flex;
  flex-direction: column;
  background: orange;
  align-items: flex-start; /* 确保容器宽度由第一个子元素决定 */
}

p {
  box-sizing: border-box;
  overflow: hidden;
}

.long {
  width: auto;
  max-width: 0; /* 折叠时隐藏内容，不占用额外宽度 */
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 3s,
    opacity 3s;
}

.item:hover .long {
  height: 1.5rem;
  max-width: calc-size(auto, size); /* 动画到内容原生宽度 */
  opacity: 1;
}

原理：折叠状态下max-width:0会截断文本，不会让父容器被长文本撑开；hover时通过max-width动画到内容宽度，保证动画流畅且布局稳定。

方案二：固定父容器宽度为第一个子元素宽度 #

让父容器宽度由第一个<p>元素决定，.long的100%宽度基于这个固定值：

.parent {
  display: flex;
  align-items: start;
}

.item {
  display: flex;
  flex-direction: column;
  background: orange;
  width: fit-content; /* 容器宽度匹配第一个子元素的内容宽度 */
}

p {
  box-sizing: border-box;
  overflow: hidden;
}

.long {
  width: 100%; /* 起始宽度匹配父容器宽度 */
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    width 3s,
    opacity 3s;
}

.item:hover .long {
  height: 1.5rem;
  width: calc-size(auto, size); /* 动画到内容原生宽度 */
  opacity: 1;
}

原理：.item的width:fit-content让其宽度仅由第一个短文本<p>决定，.long的width:100%不会触发父容器宽度扩张，hover时正常动画到长文本宽度。

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