Hide fixed size child when scalable parent is too small?

Question

Maybe someone has come up with a way of hiding (well do precise I need to replace them with something else, but if I get hiding that is simple) elements that do not fit inside their parents? Something that you would expect if there was such value for overflow property:

 overflow:hide-whole;

Obviously there is no such option. But I was thinking maybe there is some, not too large, css+html hack to achieve that? Do not suggest JS.

score 0 · Answer 1 · answered Jan 16 '15 at 10:11

0

You can go with display:none or visibility:hidden depending your need

answered Jan 16 '15 at 10:11

Jaay

2,103
1
16
34

That is all very obvious, but how to toggle them without js, when parent container becomes too small for child. – morphles Jan 16 '15 at 11:48
My bad, I didn't understand what you were asking, I'm afraid that there is no way to do it without javascript as you want to know "if there is an overflow, then don't show the element". There is a topic on SO about that http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow – Jaay Jan 16 '15 at 12:34

score 0 · Accepted Answer · answered Jan 16 '15 at 14:27

So I managed to solve my problem. Suppose I have some object, say some flash that is fixed size, suppose 640x480. And I want to have it in a "magic" container that would at most take that much space, but if window gets narrow I want container to scale down, and totally hide flash.

<div class="container" style="max-width:641px;max-height:480px;width:100%;overflow:hidden;">
    <div style="width:1px;float:left;height:480px;"></div>
    <div style="width:639px;float:left;"></div>
    <embed/object ....>
</div>

Now when downsizing, helper div's push child below parents lower bound and it becomes invisible. For special message one can use additional div with absolute positioning and then employ z-index to make sure it is not visible when main content is visible.

Hide fixed size child when scalable parent is too small?

2 Answers2