如何防止孩子的内容拉伸父母的宽度[重复]答案

【问题标题】：How to prevent child's content from stretching parent's width [duplicate]如何防止孩子的内容拉伸父母的宽度[重复]
【发布时间】：2019-12-27 04:33:10
【问题描述】：

我有一个组件 (Container)，其中包含一个图标（下面标有 X）、一个标题和一个包含长消息的子组件 (Message)。我希望Container's 宽度环绕图标和标题，以便在窗口宽度允许的情况下两者都在一行上。

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

按照建议，我在 Message 中的虚拟 div 上使用了 flex-grow: 1; width: 0; 样式 here 以防止其增长。这适用于除 MS Edge 之外的所有浏览器，其中消息内容延伸父级：

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

Style.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;
}

Container.jsx：

export const Container = () => {
  return (
    <div className='box'>
      <div className='container'>
        <div className='icon'>
          X
        </div>
        <div className='content'>
          <div className='title'>
            Some title
          </div>
          <Message>
            Long message that should not make parent wider
          </Message>
        </div>
      </div>
    </div>
  );
}

Message.jsx：

export const Message = ({children}) => {
  const [isExpanded, setExpanded] = React.useState(false);

  const handleClick = () => setExpanded(!isExpanded);

  return (
    <div>
      <div>
        <button onClick={handleClick}>Click</button>
      </div>
      {isExpanded &&
        <div className='message'>
          <div>{children}</div>
        </div>
      }
    </div>
  );
}

【问题讨论】：

尝试为父级设置最大宽度

标签： css reactjs flexbox

【解决方案1】：

在消息容器上尝试width:0;min-width:100%;：

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

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

.icon {
  margin-right: 10px;
}

message {
  display:block;
  width:0;
  min-width:100%;
}

<div class='box'>
  <div class='container'>
    <div class='icon'>
      X
    </div>
    <div class='content'>
      <div class='title'>
        Some title
      </div>
      <message>
        <div>Long message that should not make parent wider</div>
      </message>
    </div>
  </div>
</div>

或者到消息里面的div：

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

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

.icon {
  margin-right: 10px;
}

message {
  display:block;
}
message  > div {
  width:0;
  min-width:100%;
}

<div class='box'>
  <div class='container'>
    <div class='icon'>
      X
    </div>
    <div class='content'>
      <div class='title'>
        Some title
      </div>
      <message>
        <div>Long message that should not make parent wider</div>
      </message>
    </div>
  </div>
</div>

【讨论】：