How do I prevent the overflow of a fixed element using CSS?

Question

I want my inner div, which is colored red, to not be visible outside of its parent div, which is blue. I used overflow: hidden;, but that didn't seem to work. And I want to achieve this using CSS only, because JavaScript is giving me problems when I make pages in SharePoint.

Does anyone know how I can make the overflow hidden?

.container {
  left: 0px;
  width: 800px;
  height: 1200px;
  background: green;
}

.outer {
  position: absolute;
  left: 0px;
  width: 600px;
  height: 1000px;
  background: blue;
  overflow: hidden;
}

.inner {
  position: fixed;
  width: 100px;
  height: 600px;
  background: red;
  margin-left: 0px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

<br/><br/><br/><br/><br/><br/>

score 0 · Answer 1 · answered Aug 24 '17 at 00:26

0

A fixed element is positioned relative to the browser window; there is no consideration to the parent element's location.

In order for your inner element to be contained within the parent, you need to use a different positioning. In this case, you're probably looking for absolute positioning (with position: absolute), which is positioned relative to the first ancestor that has a defined position (in this case, the .outer parent).

.container {
  left: 0px;
  width: 800px;
  height: 1200px;
  background: green;
}

.outer {
  position: absolute;
  left: 0px;
  width: 600px;
  height: 1000px;
  background: blue;
  overflow: hidden;
}

.inner {
  position: absolute;
  width: 100px;
  height: 600px;
  background: red;
  margin-left: 0px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

<br/><br/><br/><br/><br/><br/>

Hope this helps! :)

answered Aug 24 '17 at 00:26

Obsidian Age

41,205
10
48
71

Is there any way, using CSS, to make the red div move down and stay entirely visible as the user scrolls down, but not allow it to stay visible beyond the blue zone? – shampouya Aug 24 '17 at 00:32
1

@shampouya No you need JavaScript to trigger different behavior based on scrolling. With CSS you are limited in which events you can actually act on. The events that come to mind are click, hover, and focus? – zer00ne Aug 24 '17 at 00:51
@zer00ne that's not quite correct; the `position: sticky` property exists for exactly this function. – TylerH Aug 24 '17 at 02:23
cc @shampouya the `position: sticky` property can do this, but it does not have full browser support. Check it out on caniuse.com for more info. – TylerH Aug 24 '17 at 02:23
@TylerH thanks for pointing that out, I wasn't aware that Chrome finally supports it. Now that Firefox, Chrome, and Safari support it it should be considered (M$ browsers don't count) – zer00ne Aug 24 '17 at 07:00
1

@zer00ne Yep, Chrome added support back behind a flag in v52, and moved it out to default behavior in Chrome 56: https://stackoverflow.com/questions/15646747/why-doesnt-position-sticky-work-in-chrome/26222260#26222260 – TylerH Aug 24 '17 at 13:29

How do I prevent the overflow of a fixed element using CSS?

1 Answers1