请求有关overflow：hidden的更多信息

Question

我正在创建一个HTML / CSS应用程序，我有点卡住了。 假设我有2个元素位于彼此旁边display: inline-block

每个元素都有两个彼此相邻的元素。 请参阅下图试图解释它：

因此，下图描述了3个不同级别的元素：

• 等级1：红色 - 外部元素
• 第2级：黄色 - 包装元素
• 等级3：绿色 - 内容

在HTML中，这可以构造如下：

<ul id="holder">
    <li>
        <div>
            <div class="col">Col 1</div>
            <div class="col">Col 2</div>
        </div>
    </li>
    <li>
        <div class="col">Col 1</div>
        <div class="col">Col 2</div>
    </li>
</ul>

UL表示红色元素，LI表示黄色元素，DIV元素表示绿色元素。

现在，让我们说我们的红色元素有一个固定的宽度，我把溢出放在隐藏上。这意味着当我调整页面大小时，右侧的元素在不适合页面时会消失。

但是这里的问题很复杂，当我调整窗口大小，窗口变得太小而无法呈现所有内容时，立即在屏幕上看不到最新的LI元素。

是否有任何CSS方法可以确保没有隐藏LI元素但是LI中的DIV元素？当两个DIV元素都被隐藏时，当然可以隐藏LI元素，因为它是空的吗？

如果没有CSS方法可以做到这一点，有人会介意使用JavaScript或其他方式让我朝着正确的方向前进吗？

这是一个jsFiddle来解释一下。

亲切的问候

Answer 1

li从视图中消失，因为它在display: inline-block中。 一旦窗口不够宽，它就会移动低于第一个li。 如果您释放#holder的高度（height:auto），就会发现这种情况。 解决方案是添加white-space : nowrap以强制li保持一行。

更新小提琴： https://jsfiddle.net/zLqfe4z8/4/

Answer 2

这不是你的元素隐藏的问题，因为没有足够的宽度，这是因为它们是因为没有足够的宽度（然后被overflow: hidden隐藏）而包装。

You can see this happening如果您删除了包装器上的height约束：

#holder { overflow: hidden; border: 1px solid red;  }

修复很简单，stop it from wrapping使用white-space: nowrap：

#holder { white-space:nowrap; overflow: hidden; border: 1px solid red; height: 52px; }