Html 当它溢出 flex 父项时如何隐藏 flex 项？

How can I hide flex items when it overflows the flex parent?

提问by Brett Ryan

Supposing that I have a flexbox container where the content may overflow the parent container. What I would like is that if any item gets larger than the container by any amount that it be hidden. If I set overflow: hiddenit will only hide the overflowed portion of that item, not the entire item.

假设我有一个 flexbox 容器，其中的内容可能会溢出父容器。我想要的是，如果任何物品比容器大任何数量，则将其隐藏。如果我设置overflow: hidden它只会隐藏该项目的溢出部分，而不是整个项目。

Consider the following:

考虑以下：

<nav id="top-nav">
    <div id="main-nav-container">
        <div class="menu">
            <ul>
                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 2</a></li>
                <li><a href="/">Item 3</a></li>
                <li><a href="/">Item 4</a></li>
            </ul>
        </div>
        <div class="menu">
            <ul>
                <li><a href="/">Other 1</a></li>
                <li><a href="/">Other 2</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS:

CSS：

#top-nav, #top-nav div.menu ul li {
  background-color: #444;
}

#main-nav-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 40px;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-justify-content: -moz-space-between;
  -ms-justify-content: -ms-space-between;
  justify-content: space-between;
}

#top-nav div.menu {
  -webkit-flex: 1;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

#top-nav div.menu:last-child {
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-end;
}

#top-nav div.menu,
#top-nav div.menu ul {
  text-align: left;
  alignment-baseline: baseline;
  margin: 0;
  padding: 0;
}
#top-nav div.menu ul {
  list-style: none;
}
#top-nav div.menu > ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  white-space: nowrap;
}
#top-nav div.menu li {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0
  position: relative;
  font-size: 1.1em;
  cursor: pointer;
}
#top-nav div.menu ul li a {
  color: #E6E6E6;
  text-decoration: none;
  display: block;
  padding: 7px;
}

If the window shrinks I want "Item 4" to hide as soon as it starts to become overlapped by "Other 1".

如果窗口缩小，我希望“项目 4”在开始与“其他 1”重叠时立即隐藏。

Once I achieve this I'd also need a selector that can target those that are hidden.

一旦我实现了这一点，我还需要一个可以针对那些隐藏的选择器。

jsfiddle setup here

jsfiddle设置在这里

回答by Barun

A workaround for your problem would be to add following CSS code:

您的问题的解决方法是添加以下 CSS 代码：

#top-nav div.menu > ul {
  flex-wrap: wrap;
  height: 34px;
  overflow: hidden;
}

---

---

If you want to know which elements got hidden, you should solve your problem using Javascript/jQuery, because you cannot know that using CSS.

如果你想知道哪些元素被隐藏了，你应该使用 Javascript/jQuery 来解决你的问题，因为你无法使用 CSS 来知道。

回答by Vincent Tang

I made a multipart codepen demonstrating the above answers ( e.g. using overflow hidden and height) but also how you would expand / collapse overflowed items

我制作了一个多部分代码笔来演示上述答案（例如使用溢出隐藏和高度）以及如何展开/折叠溢出的项目

Example 1: https://codepen.io/Kagerjay/pen/rraKLB( Real simple example using the aanswers others have mentioned)

示例 1：https: //codepen.io/Kagerjay/pen/rraKLB（使用其他人提到的 aanswers 的真实简单示例）

Example 2: https://codepen.io/Kagerjay/pen/LBErJL(Single event handler show more / showless on overflowed items)

示例 2：https: //codepen.io/Kagerjay/pen/LBerJL（单个事件处理程序在溢出的项目上显示更多/无显示）

Example 3: https://codepen.io/Kagerjay/pen/MBYBoJ(Multi event handler on many show more/ show less on overflowed items)

示例 3：https: //codepen.io/Kagerjay/pen/MBYBoJ（多事件处理程序在溢出项目上显示更多/显示更少）

I have attached example 3 below as well, I use Jade/Pug so its kind of verbose example below

我还附上了下面的示例 3，我使用了 Jade/Pug，所以下面是一种详细的示例

// Overflow boolean checker
function isOverflown(element){
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

// Jquery Toggle Text Plugin
$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

// Toggle Overflow
function toggleOverflow(e){
  e.target.parentElement.classList.toggle("grid-parent--showall");
  $(e.target).toggleText("Show More", "Show LESS");
}

// Where stuff happens
var parents = document.querySelectorAll(".grid-parent");

parents.forEach(parent => {
  if(isOverflown(parent)){
    parent.lastElementChild.classList.add("btn-show");
    parent.lastElementChild.addEventListener('click', toggleOverflow);
  }
})

body {
  background-color: #EEF0ED;
  margin-bottom: 300px;
}

.grid-parent {
  margin: 20px;
  width: 250px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 100px;
  position: relative;
}
.grid-parent--showall {
  max-height: none;
}

.grid-item {
  background-color: blue;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid red;
}
.grid-item:nth-of-type(even) {
  background-color: lightblue;
}

.btn-expand {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding: 3px;
  background-color: red;
  color: white;
}

.btn-show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p>
  <p>Click "SHOW MORE" to see the results</p>
</section>
<radio></radio>
<div class="wrapper">
  <h3>5 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>8 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>10 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>13 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>16 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>19 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
</div>

回答by Brett Ryan

I was hoping for a CSS solution, though I've just implemented a javascript implementation instead. I've used jQuery here, though it's not necessary.

我希望有一个 CSS 解决方案，尽管我刚刚实现了一个 javascript 实现。我在这里使用了 jQuery，虽然它不是必需的。

$(function() {
  $(window).resize(function() {
    var max = $("#top-nav div.menu:last-child>ul>li:first-child").position().left;
    $("#top-nav div.menu:first-child > ul").children("li").each(function() {
      // We have to show first so we can get position/size
      var $this = $(this).show();
      if ($this.position().left + $this.width() > max) {
        $this.nextAll().andSelf().hide();
        return false;
      }
    });
  });
  $(window).resize();
});

Getting the hidden nodes elsewhere can be achieved by $("#top-nav div.menu:first-child>ul>li:hidden");. I could alternatively add a class to this that can be targeted separately for example by providing a button to display hidden items.

可以通过 实现在别处获取隐藏节点$("#top-nav div.menu:first-child>ul>li:hidden");。我也可以为此添加一个可以单独定位的类，例如通过提供一个按钮来显示隐藏的项目。

回答by Jorik

Here's an implementation with flexbox;

这是一个使用 flexbox 的实现；

* {
  box-sizing: border-box;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 300px;
  overflow: hidden;
  border: solid 1px red;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  height: auto;
  padding: 15px;
  width: 100%;
  border: solid 1px #000;
  flex: 0 0 auto;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G<br />klajlka</li>
  <li>H</li>
</ul>