如何防止孩子的内容伸展父母的宽度 [英] How to prevent child's content from stretching parent's width

问题描述

我有一个组件（ Container ），其中包含一个图标（在下面标有 X ）以及包含长消息的子组件（ Message ）。我想将容器的的宽度包裹在图标和标题周围，以便两者都在窗口宽度允许的范围内。

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

我使用了 flex-grow：1; width：0; 消息中的虚拟 div 样式，如建议的


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

Style.css：

  .box {
 display：table; 
保证金：自动； 
边框：1px纯黑色； 
} 
 
 .container {
 display：flex; 
 justify-content：center; 
} 
 
 .icon {
 margin-right：10px; 
} 
 
 .message {
 display：flex; 
} 
 
 .message> div {
 flex-grow：1; 
宽度：0； 
断字：全力以赴； 
} 
  

Container.jsx：

  export const Container =（）=> {
 return（
< div className ='box'> 
< div className ='container'> 
< div className ='icon'> 
 X 
< / div> 
< div className ='content'> 
< div className ='title'> 
某些标题
< / div> 
< Message> 
不应使父级更宽的长消息
< / Message> 
< / div> 
< / div> 
< / div> 
）; 
} 
  

Message.jsx：

  export const Message =（{children}）=> {
 const [isExpanded，setExpanded] = React.useState（false）; 
 
 const handleClick =（）=> setExpanded（！isExpanded）; 
 
返回值（
< div> 
< div> 
< button onClick = {handleClick}> Click< / button> 
< ; / div> 
 {isExpanded&& 
< div className ='message'> 
< div> {children}< / div> 
< / div> 
} 
< / div> 
）; 
} 
  

解决方案

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

  .box {display：table;保证金：自动； border：1像素纯黑色；}。容器{display：flex; justify-content：center;}。icon {margin-right：10px;} message {display：block;宽度：0; min-width：100％;}  

 < div类='盒子'> < div class ='容器'> < div class ='icon'> X< / div> < div class ='content'> < div class ='title'>一些标题< / div> <消息> < div>不应使父级变宽的长消息< / div> < / message> < / div> < / div>< / div>  

邮件中的div：

>

  .box {display：表;保证金：自动； border：1像素纯黑色；}。容器{display：flex; justify-content：center;}。icon {margin-right：10px;} message {display：block;} message> div {width：0; min-width：100％;}  

 < div类='盒子'> < div class ='容器'> < div class ='icon'> X< / div> < div class ='content'> < div class ='title'>一些标题< / div> <消息> < div>不应使父级变宽的长消息< / div> < / message> < / div> < / div>< / div>  

I have a component (Container) that contains an icon (marked with an X below), a title and a child component (Message) that contains a long message. I would like Container's width to wrap around the icon and the title so both are on one line as much as window's width allows for it.

Message component has a button that toggles display of a long text. This text should not stretch the parent Container and it should be aligned with title's width. The message content can be broken and wrapped at any point:

I used a flex-grow: 1; width: 0; style on a dummy div in Message as suggested here to prevent it from growing. This works well on all browsers except for MS Edge, where the message content stretches the parent:

How can I fix this issue on MS Edge? Is there alternative way using only CSS that I can prevent the message content from stretching its parent?

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>
  );
}

解决方案

Try width:0;min-width:100%; on the message container:

.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>

Or to the div inside the message:

.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>

这篇关于如何防止孩子的内容伸展父母的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！