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

查看：23
本文介绍了防止子元素在 flexbox 中溢出其父元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个 Web 应用程序，该应用程序显示一个大的卡片网格，其高度本质上是可变的.

为了美观，我们使用了 jQuery 的 .matchHeight() 来均衡每行卡片的高度.

它的性能不能很好地扩展，所以今天我一直在迁移到基于 flex-box 的解决方案，它的速度要快得多.

但是，我丢失了一个行为 - 如果不适合，卡片标题的内容应该用省略号截断.

目标:

  1. 3 列
  2. 列宽因填充父级而异
  3. 列之间的恒定间距
  4. 高度在一行内均衡

我如何安排容器大小得到遵守，text-overflow: ellipsis; 和 white-space: nowrap; 得到尊重?

(没有 jQuery 标签，因为我们正在远离它)

我的当前形式的解决方案，除了截断之外，它实现了我的所有目标:

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

#container {显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;/* 偏置卡片从左边缘堆叠 */对齐项目:拉伸；/* 在一行中，所有卡片高度相同 */边框:薄实心灰色；}.card-wrapper {宽度:33.33%；显示:弹性；背景:#e0e0ff；}.卡片 {弹性增长:1；边距:7px；显示:弹性；弹性方向:列；边框:薄实心灰色；背景:#e0ffff；}.card div {边框:薄实心灰色；}.card div:nth-child(1) {空白:nowrap；文本溢出:省略号；}.card div:nth-child(2) {弹性增长:2；} 

<div class="card-wrapper"><div class="card"><div>标题</div><div>多行<br/>正文</div><div>页脚</div>

<div class="card-wrapper"><div class="card"><div>很长的漫无边际的标题，超出了容器的界限，除非你的屏幕真的很宽</div><div>正文</div><div>页脚</div></div></div><div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div><;/div>

<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div><;/div>

<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div><;/div>

解决方案

弹性项目的初始设置是 min-width: auto.这意味着默认情况下 flex 项不能小于其内容的大小.

因此，text-overflow: ellipsis 不能工作，因为弹性项目只会扩展，而不是允许溢出.(出于同样的原因，滚动条也不会呈现.)

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

#container {显示:弹性；flex-wrap: 包裹;边框:薄实心灰色；}.card-wrapper {宽度:33.33%；显示:弹性；背景:#e0e0ff；}.卡片 {弹性增长:1；边距:7px；显示:弹性；弹性方向:列；边框:薄实心灰色；背景:#e0ffff；溢出:隐藏；/* 新的 */}.card div {边框:薄实心灰色；}.card div:nth-child(1) {空白:nowrap；文本溢出:省略号；溢出:隐藏；/* 新的 */}.card div:nth-child(2) {弹性增长:2；}

<div class="card-wrapper"><div class="card"><div>标题</div><div>多行<br/>正文</div><div>页脚</div>

<div class="card-wrapper"><div class="card"><div>很长的漫无边际的标题超出了容器的边界，除非你的屏幕真的很宽</div><div>正文</div><div>页脚</div>

<div class="card-wrapper"><div class="card"><div>标题</div><div>正文</div><div>页脚</div>

<div class="card-wrapper"><div class="card"><div>标题</div><div>正文</div><div>页脚</div>

<div class="card-wrapper"><div class="card"><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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆