当flex父项溢出时，如何隐藏flex项? [英] How can I hide flex items when it overflows the flex parent?

问题描述

假设我有一个flexbox容器，其中的内容可能会溢出父容器.我想要的是，如果任何项目变得比容器大任何数量，那么它将被隐藏.如果我设置 overflow:hidden ，它将仅隐藏该项目的溢出部分，而不是整个项目.

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: hidden it will only hide the overflowed portion of that item, not the entire item.

请考虑以下内容:

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

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

如果窗口缩小，我希望项目4"在开始与其他1"重叠时就隐藏起来.

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

实现这一目标后，我还需要一个可以针对隐藏对象的选择器.

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

jsfiddle此处设置

推荐答案

解决此问题的方法是添加以下CSS代码:

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

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

---

如果您想知道隐藏了哪些元素，则应该使用Javascript/jQuery解决问题，因为您不知道使用CSS.

---

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

这篇关于当flex父项溢出时，如何隐藏flex项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！