Html 防止子元素在 flexbox 中溢出其父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43809612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent a child element from overflowing its parent in flexbox
提问by Chris
I'm working on a web app that shows a large grid of cards, the height of which is inherently variable.
我正在开发一个 Web 应用程序，该应用程序显示一个大的卡片网格，其高度本质上是可变的。
In the interests of aesthetics, we were using jQuery's .matchHeight()to equalise the height of cards within each row.
为了美观，我们使用 jQuery.matchHeight()来均衡每行卡片的高度。
The performance of that didn't scale well, so today I've been migrating to a flex-box based solution which is so much faster.
它的性能不能很好地扩展，所以今天我一直在迁移到基于 flex-box 的解决方案，它的速度要快得多。
However, I've lost a behaviour - the content of the card header should be truncated with an ellipsis if it won't fit.
但是，我丢失了一个行为 - 如果不适合，卡片标题的内容应该用省略号截断。
Goals:
目标：
- 3 columns
- Column widths vary to fill parent
- Constant spacing between columns
- Heights equalised within a row
- 3列
- 列宽因填充父项而异
- 列之间的恒定间距
- 一行内的高度相等
How do I arrange for the container size to be respected and the text-overflow: ellipsis;and white-space: nowrap;to be honoured?
如何安排得到尊重容器大小和text-overflow: ellipsis;和white-space: nowrap;兑现？
(No jQuery tag as we're moving away from that)
（没有 jQuery 标签，因为我们正在远离它）
My solution in it's current form, which achieves all of my goals apart from the truncation:
我的当前形式的解决方案实现了除截断之外的所有目标：
https://codepen.io/anon/pen/QvqZYY
https://codepen.io/anon/pen/QvqZYY
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; /* Bias cards to stack from left edge */
align-items: stretch; /* Within a row, all cards the same height */
border: thin solid gray;
}
.card-wrapper {
width: 33.33%;
display: flex;
background: #e0e0ff;
}
.card {
flex-grow: 1;
margin: 7px;
display: flex;
flex-direction: column;
border: thin solid gray;
background: #e0ffff;
}
.card div {
border: thin solid gray;
}
.card div:nth-child(1) {
white-space: nowrap;
text-overflow: ellipsis;
}
.card div:nth-child(2) {
flex-grow: 2;
} <div id="container">
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Multiline<br/>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper"><div class="card"><div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
</div> 回答by Michael Benjamin
An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot be smaller than the size of its content.
弹性项目的初始设置是min-width: auto. 这意味着默认情况下，弹性项目不能小于其内容的大小。
Therefore, text-overflow: ellipsiscannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)
因此，text-overflow: ellipsis不能工作，因为 flex 项目只会扩展，而不是允许溢出。（出于同样的原因，滚动条也不会呈现。）
To override this behavior, use min-width: 0or overflow: hidden. More details.
要覆盖此行为，请使用min-width: 0或overflow: hidden。更多细节。
#container {
display: flex;
flex-wrap: wrap;
border: thin solid gray;
}
.card-wrapper {
width: 33.33%;
display: flex;
background: #e0e0ff;
}
.card {
flex-grow: 1;
margin: 7px;
display: flex;
flex-direction: column;
border: thin solid gray;
background: #e0ffff;
overflow: hidden; /* NEW */
}
.card div {
border: thin solid gray;
}
.card div:nth-child(1) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; /* NEW */
}
.card div:nth-child(2) {
flex-grow: 2;
}<div id="container">
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Multiline<br/>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
</div>