相关疑难解决方法(0)

我有一个组件 ( 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 …

请参阅以下代码笔：https ://codepen.io/allen-houng/pen/XGMjMr ? editors = 1100#0

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

我有一个有两个子div的父div-一个图像和一个描述。我正在根据视口高度调整图像的大小，这意味着宽度将是动态的且响应迅速。如何在.description不使用JavaScript的情况下调整相应的同级div的大小以匹配图像的宽度？

换句话说，我该如何处理：

到这个：