小编Paw*_*ski的帖子

我有一个组件 ( Container)，其中包含一个图标（标有X下方）、一个标题和一个Message包含长消息的子组件 ( )。我希望Container's宽度环绕图标和标题，因此它们都在一行上，因为窗口的宽度允许它。

消息组件有一个按钮，可以切换长文本的显示。此文本不应拉伸父级Container，并且应与标题的宽度对齐。消息内容可以在任何时候被破坏和包装：

我用了flex-grow: 1; width: 0;一个虚拟的风格div中Message的建议 在这里，以防止它的生长。这适用于除 MS Edge 之外的所有浏览器，其中消息内容延伸父级：

如何在 MS Edge 上解决此问题？是否有仅使用 CSS 的替代方法可以防止消息内容拉伸其父级？

样式.css：

.box {
  display: table;
  margin: auto;
  border: 1px solid black;
}

.container {
  display: flex;
  justify-content: center;
}

.icon {
  margin-right: 10px;
}

.message {
  display: flex;
}

.message > div {
  flex-grow: 1;
  width: 0;
  word-break: break-all;
}

容器.jsx：

export const Container …