防止子元素在flexbox中溢出其父元素 [英] Prevent a child element from overflowing its parent in flexbox

问题描述

为了美学的利益，我们选择了一个网络应用程序来显示一个大的网格，这个网格的高度本质上是可变的。使用jQuery的 .matchHeight（）来平衡每行内卡的高度。

因此今天我已经转移到一个基于弹性框的解决方案，它的速度非常快。然而，我已经失去了一种行为 - 内容如果不合适，请使用省略号截断卡头。

目标：

1. 3列


2. 列宽可以变化以填充父列
   
3. >在一行内均衡的高度

如何安排容器大小以及如何安排 overflow：ellipsis; 和 white-space：nowrap; 要被尊重？ （没有jQuery标签，因为我们正在离开t ）

我的解决方案是当前的形式，除了截断之外，还可以实现我所有的目标：

https://codepen.io/anon/pen/QvqZYY

#container {display：flex; flex-direction：row; flex-wrap：wrap; justify-content：flex-start; / *从左边堆叠的偏置卡* / align-items：stretch; / *连续，所有卡片相同的高度* /边框：薄实灰色; } .card-wrapper {width：33.33％;显示：flex;背景：＃e0e0ff; } .card {flex-grow：1; margin：7px;显示：flex; flex-direction：column;边框：薄实灰色;背景：＃e0ffff; } .card div {border：thin solid gray; } .card div：nth-​​child（1）{white-space：nowrap;文本溢出：省略号; } .card div：nth-​​child（2）{flex-grow：2; }

< div id =container> < div class =card-wrapper> < div class =card> < DIV>标题< / DIV> < DIV>多行<峰; br />车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / DIV> < div class =card-wrapper>< div class =card>< div>真的很漫长的标题，超出了容器的范围，除非您的屏幕真的非常宽阔< / div> ;< DIV>车身与LT; / DIV>< DIV>页脚< / DIV>< / DIV>< / DIV> < DIV类= 牌包装 >< DIV类= 卡 >< DIV>名称< / DIV>< DIV>车身与LT; / DIV>< DIV>页脚< / DIV>< ; / DIV>< / DIV> < DIV类= 牌包装 >< DIV类= 卡 >< DIV>名称< / DIV>< DIV>车身与LT; / DIV>< DIV>页脚< / DIV>< ; / DIV>< / DIV> < div class =card-wrapper>< div class =card>< div>标题< / div>< div>正文< / div>< div>页脚< / div>< ; / DIV>< / DIV> < / DIV>

初始设置在弹性项目上是 min-width：auto 。这意味着默认情况下，flex项目的大小不能小于它的内容大小。因此， text-overflow：ellipsis code>不能工作，因为flex项目只会扩展，而不允许溢出。 （滚动条不会呈现，出于同样的原因。）



要覆盖此行为，请使用 min-width：0 或 overflow：hidden 。 更多详情。



  #container {display：flex; flex-wrap：wrap; border：thin solid gray;}。card-wrapper {width：33.33％;显示：flex;背景：＃e0e0ff;} card {flex-grow：1; margin：7px;显示：flex; flex-direction：column;边框：薄实灰色;背景：＃e0ffff;溢出：隐藏; / * NEW * /}。card div {border：thin solid gray;}。card div：nth-​​child（1）{white-space：nowrap;文本溢出：省略号;溢出：隐藏; / * NEW * /}。card div：nth-​​child（2）{flex-grow：2;}  

 < div id =container> < div class =card-wrapper> < div class =card> < DIV>标题< / DIV> < DIV>多行<峰; br />车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < div>真的很漫长的标题，超出容器的界限，除非你的屏幕真的很宽，< / div> < DIV>车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < DIV>标题< / DIV> < DIV>车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < DIV>标题< / DIV> < DIV>车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < DIV>标题< / DIV> < DIV>车身与LT; / DIV> < DIV>页脚< / DIV> < / DIV> < / div>< / div>  

I'm working on a web app that shows a large grid of cards, the height of which is inherently variable.

In the interests of aesthetics, we were using jQuery's .matchHeight() to equalise the height of cards within each row.

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.

However, I've lost a behaviour - the content of the card header should be truncated with an ellipsis if it won't fit.

Goals:

1. 3 columns
2. Column widths vary to fill parent
3. Constant spacing between columns
4. Heights equalised within a row

How do I arrange for the container size to be respected and the text-overflow: ellipsis; and white-space: nowrap; to be honoured?

(No jQuery tag as we're moving away from that)

My solution in it's current form, which achieves all of my goals apart from the truncation:

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> 

解决方案

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.

Therefore, text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)

To override this behavior, use min-width: 0 or overflow: hidden. More details.

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

这篇关于防止子元素在flexbox中溢出其父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！