Trouble with overflow

Question

I have a container element with the "overflow-y: hidden" attribute. However, this makes the "overflow-x" property become "scroll" instead of visible. I have no way to make it overflow x-: display. Have any way to make its "overflow-x" property is "visible" while keeping "overflow-y: hidden"?

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow-y: hidden;
    
  }
  .container div{
    background-color: red;
    width: 120%;
    height: 20px;
  }

 <div class="container">
    <div>
     overflow x div
    </div>
  </div>

@Mido, I'm having trouble to understand the problem. What do you mean by "overflow-x" property is "visible". — Vivekraj K R, Oct 09 '19 at 07:40
What if you add overflow: visible; after overflow-y: hidden;? — Fabio Assuncao, Oct 09 '19 at 07:41
@Mido Ok. But why are you giving width 50% to container and width: 120% to child div. Can you please elaborate on the desired result with jsfiddle. — Vivekraj K R, Oct 09 '19 at 08:44
@ VivekrajKR You can imagine how a dropdown-menu displays with submenu. 50% for main menu and 120% represent for side sub menu, it must be display outside the main menu. I could not produce the result I wanted, that was the problem I encountered. — Mido, Oct 09 '19 at 17:53

score 1 · Accepted Answer · answered Oct 09 '19 at 08:32

1

Did you try max-height property ?

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow: visible;

    
  }
  .container div{
    background-color: red;
    width: 120%;
    max-height: 100%;
    overflow: hidden;

  }

 <div class="container">
    <div>
     overflow x div
    </div>
  </div>

answered Oct 09 '19 at 08:32

dnaz

276
5
14

It cannot solve the problem I'm having. I. However it actually solved this example problem. I am using a container with max-height attribute. And the max-height of a child div does not work with ancestral elements that use the maxi-height instead of the height – Mido Oct 09 '19 at 18:04

score 0 · Answer 2 · answered Oct 09 '19 at 07:23

0

Change the width in the container to either 100% or fixed px

answered Oct 09 '19 at 07:23

Lee

204
1
3
14

This isn't my problem. I want child div width overflow and it can be displayed. – Mido Oct 09 '19 at 07:28
i see, I assume you must have this hidden? as overflow-x:visible; will make the container div visible, or overflow-x:visible; overflow-y:hidden; on the container div. Not entially sure what you're looking for .Hope this helps – Lee Oct 09 '19 at 07:37
This is exactly my problem. I need overflow-x: visible and overflow-y: hidden. – Mido Oct 09 '19 at 07:41

score 0 · Answer 3 · answered Oct 09 '19 at 07:43

0

I made this at chrome and it worked.

https://jsfiddle.net/fz7mt3ho/

css

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow-y: hidden;
    overflow: visible; /*added line*/
  }
  .container div{
    background-color: red;
    width: 120%;
    height: 20px;
  }

answered Oct 09 '19 at 07:43

Fabio Assuncao

624
4
12

This makes both overflow-x and overflow-y is visible – Mido Oct 09 '19 at 07:49

Trouble with overflow

3 Answers3