DIV bigger than parent with overflow:hidden; position: relative

Question

How can I display a DIV which is bigger than its ancestor, when the ancestor DIV has style overflow: hidden; position: relative;?

Here is an example:

HTML:

<div class="container">
  <div class="content">
  __________________________SHOW_ME
  </div>
</div>

CSS:

.container {
  position: relative;
  padding: 10px;
  overflow: hidden;
  width: 10em;
  border: 1px solid;
  height: 50px;
}

.content {
  position: absolute;
  overflow: visible;
  border: 5px solid red;
}

Here is this example on JS Fiddle.

I tried styling the content DIV with various combinations of position: absolute, overflow: visible, right: -100px, but it didn't help.

How can I style the content div so that it is entirely visible? I cannot modify the parent DIV with container class, only the content inside.

short version: you can't. long version: you can use position fixed, but then the content div will scroll with the screen — Pete, Sep 28 '16 at 13:02
i think, that you have to somehow modify `.container` to `overflow:visible` or its width — Pepo_rasta, Sep 28 '16 at 13:02
@Pete thanks, position:fixed would work for me. Would you post that as Answer ? — TMG, Sep 28 '16 at 13:10
Ah, give it to Erikzy - I don't think it's a good enough solution to warrant a full answer because of the scrolling defect - if I were to use js to fix that, instead, I would probably just wrap the container and move the content into the wrapper — Pete, Sep 28 '16 at 13:14
Why do you need (or can't remove) `overflow: hidden` on the parent? — Asons, Sep 28 '16 at 19:29
Check this answer in the dupe link: http://stackoverflow.com/a/11833892/2827823 — Asons, Sep 28 '16 at 19:38

score 0 · Answer 1 · answered Sep 28 '16 at 13:09

0

if you want the content's position to be tied to the container, you basically can't unless you use javascript to update the position on scroll and set the position of the content to be fixed instead of absolute.

answered Sep 28 '16 at 13:09

Erikzy

26
1

score 0 · Answer 2 · answered Sep 28 '16 at 13:16

0

Actually you can't show div inside element using overflow:hidden, But I have solution for you. You can give your div with overflow:auto, so user can scroll x

Here the example fiddle

answered Sep 28 '16 at 13:16

Rohman HM

2,539
3
25
40

thanks, but scroll looks ugly :-) – TMG Sep 28 '16 at 13:17
The best solution is change the `overflow:hidden;` in your `.container` why you don't do that? – Rohman HM Sep 28 '16 at 13:21

Dhaarani · Answer 3 · 2016-09-28T13:30:44.897

0

.container {
  position: relative;
  padding: 10px;
  overflow: hidden;
  width: auto;
  border: 1px solid;
  height: 50px;
}

.content {
    position: absolute;
    overflow: auto;
    border: 5px solid red;
    width: auto;
    padding: 10px;
}

<div class="container">
  <div class="content">
        __________________________SHOW_ME
  </div>
</div>

edited Sep 28 '16 at 13:30

answered Sep 28 '16 at 13:21

Dhaarani

1,350
1
13
23

DIV bigger than parent with overflow:hidden; position: relative

3 Answers3