Overflow scroll has overflow hidden

Question

I have a div scrollable content and in it is a header that should overflow its parent. It seems that overflow: scroll adds overflow: hidden to the element.
If you could help me I would appreciate it. Thanks!

The HTML:

<div class="container">
    <div class="problem">This is hidden</div>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

<div class="container container-2">
    <div class="problem">This is what i want, but scrollable.</div>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

The CSS:

.container {
    width: 230px;
    height: 200px;
    background-color: #eeeeee;
    overflow-y: scroll;
    margin-top: 30px;
    margin-left: 30px;
    float: left;
}

.container-2 {
    overflow-y: visible;
}

.problem {
    width: 235px;
    height: 30px;
    background-color: #33CCFF;
    margin-left: -20px;
    margin-top: 15px;
}

Vinay Pratap Singh Bhadauria · Accepted Answer · 2014-02-26 16:02:55Z

1

.problem {
    width: 235px;
    height: 30px;
    background-color: #33CCFF;
    /*margin-left: -20px;*/  //this is the cause of problem comment this
    margin-top: 15px;
}

Demo Fiddle

answered Feb 26, 2014 at 16:02

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luca Boieru Over a year ago

The idea is that I want the blue div to be a little bit outside of its parent like it is in the last one, but in the first one the overflow hides it.

Vinay Pratap Singh Bhadauria Over a year ago

@LucaBoieru like the second one is going in right, or you want it to the left

Luca Boieru Over a year ago

I want the blue div to be outside to the left (see the original code of the second example)

Collectives™ on Stack Overflow

Overflow scroll has overflow hidden

1 Answer 1

Demo Fiddle

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related