NextJs中dangerouslySetInnerHTML致列宽异常的解决求助

问题核心在于flex布局中，flex项目默认的min-width: auto会让容器宽度至少适配内容，导致你设置的w-1/2被内容撑开，同时第一、三列被挤压。以下是具体修复方案：

步骤1：修正父容器的flex布局结构 #

首先确保整个三列的父容器是flex布局，同时给第一、三列添加flex-shrink-0，防止它们被挤压：

<div className="flex w-full">
  {/* 第一列：固定宽度，不允许收缩 */}
  <div className="w-1/4 flex-shrink-0 p-4">
    {/* 第一列内容 */}
  </div>

  {/* 第二列：限制宽度，处理内容溢出 */}
  <div className="w-1/2 border-2 border-primary p-4 min-w-0">
    <div className="overflow-hidden" dangerouslySetInnerHTML={{ __html: post?.metadata.content }} />
  </div>

  {/* 第三列：固定宽度，不允许收缩 */}
  <div className="w-1/4 flex-shrink-0 p-4">
    {/* 第三列内容 */}
  </div>
</div>

关键修复点 #

• 给第二列的父容器添加min-w-0：覆盖flex项目默认的min-width: auto，让容器严格遵守w-1/2的宽度设置，不再被内容撑开。
• 给CMS内容容器添加overflow-hidden：当内容宽度超过第二列时，自动裁剪溢出部分；如果需要支持滚动，可替换为overflow-y-auto。
• 第一、三列添加flex-shrink-0：确保它们的宽度不会被第二列挤压。

额外优化（可选） #

如果CMS内容中存在大图片或长文本，可进一步添加样式限制：

// 使用Tailwind的typography插件优化内容样式
<div className="overflow-hidden prose max-w-none" dangerouslySetInnerHTML={{ __html: post?.metadata.content }} />

或者手动限制元素宽度：

.cms-content img {
  max-width: 100%;
  height: auto;
}
.cms-content p {
  word-wrap: break-word;
}

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