把孩子装进家长 [英] Fitting child into parent
本文介绍了把孩子装进家长的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在底部嵌套了一个带有文本的flex元素。顶部元素的固定宽度小于文本：
.list->
我在底部嵌套了一个带有文本的flex元素。顶部元素的固定宽度小于文本：
header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px;}。header-container {display：flex; flex：1;}。header-text {display：flex; flex-direction：column; justify-content：center; overflow：hidden;} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;}
< div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>
这是通过向所有元素应用 overflow：hidden; ：
$ b $ p
.list-header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px; overflow：hidden;}。header-container {display：flex; flex：1; overflow：hidden;}。header-text {display：flex; flex-direction：column; justify-content：center; overflow：hidden;} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;}
< div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>
是不是很喜欢这个解决方案。
有没有办法使用flex属性来修复它？
对flex项目的初始设置是 min-width：auto 。这意味着flex项目不能小于其内容的宽度。
您有 white-space：nowrap 在文本元素上。因此，所有弹性项目祖先都必须展开（以多米诺骨牌效应）以适应文本的长度。
受影响的弹性项目为：
.list-component .header-container .header-text 因此，为了防止文本溢出主容器，需要覆盖 min-width：auto 默认。 Flexbox规范提供了两种方法：
min-width：0 to flex items overflow 加上 visible 以外的任何值弹性项目。 （这就是为什么您可以通过添加 overflow：hidden 来解决问题的原因，它实际上是一个干净而有效的解决方案。）这个行为在这篇文章中有更详细的解释：
.list-header {display：flex;宽度：150px;身高：80px; background-color：#ececec;}。list-component {display：flex; flex：1;填充左：24px; padding-right：24px;最小宽度：0; / * NEW * /}。header-container {display：flex; flex：1;最小宽度：0; / * NEW * /}。header-text {display：flex; flex-direction：column; justify-content：center;最小宽度：0; / * NEW * /} span {text-overflow：ellipsis;白色空间：nowrap; overflow：hidden;}
< div class =list -header> < div class =list-component> < div class =header-container> < div class =header-text> < span>长长长长长长文字< / span> < / DIV> < / DIV> < / div>< / div>
I have nested flex elements with a text at the bottom. The top element has fixed width that is smaller than text:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
}
.header-container {
display: flex;
flex: 1;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
I can fix this by applying overflow: hidden; to all elements:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
overflow: hidden;
}
.header-container {
display: flex;
flex: 1;
overflow: hidden;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
But I don't really like this solution.
Is there are way to fix it using only flex properties?
An initial setting on flex items is min-width: auto. This means that flex items cannot be shorter than the width of their content.
You have white-space: nowrap on the text element. As a result, all flex item ancestors must expand (in a domino effect) to accommodate the length of the text.
The affected flex items are:
.list-component.header-container.header-textTherefore, in order to prevent the text from overflowing the primary container, you need to override the min-width: auto default. The flexbox spec provides two methods for doing this:
min-width: 0 to flex itemsoverflow with any value other than visible to flex items. (This is why you were able to fix the problem by adding overflow: hidden. It's actually a clean and valid solution.)This behavior is explained in more detail in this post:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
min-width: 0; /* NEW */
}
.header-container {
display: flex;
flex: 1;
min-width: 0; /* NEW */
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* NEW */
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
这篇关于把孩子装进家长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
