![grow]( "grow")
本文介绍了如何防止孩子的内容拉伸父母的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个组件 (Container)，它包含一个图标(下面用 X 标记)、一个标题和一个子组件(Message>) 包含长消息.我希望 Container's 的宽度环绕图标和标题，因此两者都在一行上，只要窗口的宽度允许.
消息组件有一个按钮，可以切换长文本的显示.此文本不应拉伸父 Container，并且应与标题的宽度对齐.消息内容可以在任何时候被破坏和包装:
我使用了一个 flex-grow: 1;width: 0; 样式在 Message 中的虚拟 div 上按照建议
如何在 MS Edge 上解决此问题?是否有仅使用 CSS 的替代方法可以防止消息内容拉伸其父级?
Style.css:
.box {显示:表；保证金:自动；边框:1px纯黑色；}.容器 {显示:弹性；对齐内容:居中；}.图标 {右边距:10px；}.信息 {显示:弹性；}.message >div {弹性增长:1；宽度:0；断字:断断续续；}
Container.jsx:
export const Container = () =>{返回 ();}
Message.jsx:
export const Message = ({children}) =>{const [isExpanded, setExpanded] = React.useState(false);const handleClick = () =>setExpanded(!isExpanded);返回 (<div><div><button onClick={handleClick}>点击</button>
{isExpanded &&
<div>{儿童}</div>
}
);}
解决方案
在消息容器上试试width:0;min-width:100%;:
.box {显示:表；保证金:自动；边框:1px纯黑色；}.容器 {显示:弹性；对齐内容:居中；}.图标 {右边距:10px；}信息 {显示:块；宽度:0；最小宽度:100%；}
<div class='container'>
X
<div class='content'>
一些标题
<留言><div>不应使父级变宽的长消息
或者到消息里面的div:
.box {显示:表；保证金:自动；边框:1px纯黑色；}.容器 {显示:弹性；对齐内容:居中；}.图标 {右边距:10px；}信息 {显示:块；}消息 >div {宽度:0；最小宽度:100%；}
<div class='container'>
X
<div class='content'>
一些标题
<留言><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 suggestedhere 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>
这篇关于如何防止孩子的内容拉伸父母的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！