CODEWITHSUNDEEP
htmlcssoverflow
Luca Boieru
Luca Boieru

Reputation: 2280

Overflow scroll has overflow hidden

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

Upvotes: 0

Views: 280

Answers (1)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

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

Demo Fiddle

Upvotes: 1

Related Questions