CSS - Force Overflowing Elements to Disappear If Partially Hidden

CSS - Force overflowing elements to disappear if partially hidden

I know no way to do this with CSS but with JavaScript, you can check:

var parent = element.parentElement;
if (element.clientTop + element.clientHeight > parent.clientTop + parent.clientHeight) {
    ... element is outside parent ...
}

You can use a binary search to find the last completely visible paragraph.

Is there a CSS only way to completely hide elements that partially overflow?

It wasn't possible in 2013, but now all IE<=10 are dead, we can use flexbox.

The basic idea is to wrap flex items out of visible area.

Remove overflow: hidden; to see where the items go.

$('.parent').ready(function() {  $('.parent').resizable();})

* {  box-sizing: border-box;}.parent {  height:288px;  width: 233px;  border: 5px dashed blue;  background: yellow;    display: flex;  flex-flow: column wrap;  overflow: hidden;}
.child {  height: 100px;  width: 100%;  border: 5px solid brown;}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent"><div class="child">0</div><div class="child">1</div><div class="child">2</div><div class="child">3</div><div class="child">4</div><div class="child">5</div><div class="child">6</div><div class="child">7</div><div class="child">8</div><div class="child">9</div></div>

Completely hiding block elements that don't fully fit in the visible part of their parent

Yes it is possible with Flexbox, you need to set flex-direction: column , flex-wrap: wrap and also overflow: hidden.

Also you need to set full width or calc(100% - margin) on flex-childs so when last elements wraps itself it will go out of parent element and overflow: hidden on parent will take care of rest.

* {  box-sizing: border-box;}.container {  height: 200px;  width: 200px;  border: 1px solid black;  display: flex;  flex-direction: column;  flex-wrap: wrap;  overflow: hidden;}.box {  flex: 0 0 70px;  width: calc(100% - 10px);  margin: 5px;  background: #46A1FF;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

How can I hide an element off the edge of the screen?

Yes, just create an enclosing div with overflow: hidden, like this:

.outer {  overflow: hidden;  position: relative;}.inner {  position: absolute;  height: 100px;  width: 100px;  right: -50px;  top: 50px;}

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

Hide a partially shown div

As I mentioned in the comments, you could use the jQuery .position(). Then you would run through your inner divs and check their top right position against their container.

Something around these lines:

CSS (For demonstration only)

div div {
  background-color: red;
  width: 130px;
}

Javascript (jQuery)

$(function() {
  $("div div").each(function(index, element) {
    // By adding the element width to its left position you have the right 
    // position, which is not provided by the jQuery .position() method.
    var rightPos = $(this).position().left + $(this).width();

    var containerWidth = $(this).parent().width();

    // If the element top right corner position is outside its parent right edge,
    // it's being partially displayed, so hide it and also its subsequent 
    // siblings.
    if (rightPos > containerWidth) {
      $(this).hide().nextAll().hide();

      // Break the loop to save resources.
      return false;
    }
  });    
});

Demo

force element to display outside of overflow:hidden

The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.

Depending on your specific application, you may be able to use a structure like this:

.container {  position: fixed;  top: 30px;  left: 50px;  height: 30px;  width: 300px;  background: red;}.outer {  overflow: hidden;}.inner {  position: absolute;}.show-up {  width: 100px;  height: 300px;  background: green;  position: relative;  margin-left: 20px;}

<div class="container">  <div class="outer">    <div class="inner"></div>  </div>  <div class="show-up">this needs to show up ALL 300 pixels high of it</div></div>

Understanding the wrapping behavior of inline-block elements with overflow:hidden

From my answer to this related question:

Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. [...]

The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

And from the spec:

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

• A line cannot be broken, causing the line box to be wider than the block box.

This is why, in white-space: normal, line-break opportunities are presented by whitespace, and inline-level boxes will wrap at any opportunity they get. This includes inline-blocks. Inline-level boxes will only overflow their container if they cannot wrap, for any reason. Otherwise they will wrap.

Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box. This is why overflow occurs (even when the current line is not the first line) when the box cannot fit the bounds of its line box, for any reason, including when it's being offset by a horizontal margin.

Curiously, the behavior of no-break spaces with respect to inline-blocks is not consistent across browsers. No one knows why.

Video and z-index inside scaled element: some divs disappear

After spending a lot of time researching this problem and trying a lot of different approaches I've come to the conclusion that no solution fixes my problem. There are solutions that fix the problem if you are able to control the z-indexes of the elements that disappear, but I am unable to do so since the structure of the HTML is not known to be (it is the output of the HTML editor). I was looking for a solution that would not require changes to individual children to the scaled parent, but I have not found any so far.

This bug report pretty much covers my problem but it does not provide a fix for it.

I can confirm that this happens because the element is outside of the scaled containers original width and height:

The element is visible at scale(1.227) (red border indicates the original size of #scaled):

... but not at scale(1.228):

My solution is therefore to add another wrapping element outside the scaled element that is not scaled, but get its width and height properties updated according to its first child scale values. This element has overflow: hidden; and prevents elements from being visible.

This is not a perfect solution as one might experience a small gap between the scaled element and the outermost wrapping element (rounding issues), but it is the best I can do given the circumstances.

var goalScale = 140;var startScale = 100;var currentScale = 100;var shouldScaleUp = true;var container = document.getElementById("scaled");var scaledContainer = document.getElementById("resized-container");var scaleInfo = document.getElementById("scale-info");
function step() {  var contentWidth = 1024;  var contentHeight = 768;  container.style.transform = "scale(" + (currentScale / 100) + ")";
  scaledContainer.style.width = contentWidth * ((currentScale / 100)) + "px";  scaledContainer.style.height = contentHeight * ((currentScale / 100)) + "px";
  scaleInfo.innerText = "Scale: " + (currentScale / 100);
  if (currentScale === goalScale) {    shouldScaleUp = false;  }  if (currentScale === startScale) {    shouldScaleUp = true;  }
  if (shouldScaleUp) {    currentScale += 0.5;  } else {    currentScale -= 0.5;  }
  window.requestAnimationFrame(step);}
window.requestAnimationFrame(step);

#resized-container {  position: fixed;  width: 1024px;  height: 768px;  overflow: hidden;  border: 10px solid red;  top: 200px;  left: 200px;}
#scaled {  background: #cccccc;  width: 1024px;  height: 768px;  position: absolute;  transform-origin: left top;}
.content {  height: 100%;  position: relative;  margin-left: auto;  margin-right: auto;  background: rgba(34, 34, 56, 0.2);}
.below {  position: absolute;  width: 300px;  height: 300px;  right: 0px;  top: 100px;  background: purple;  z-index: 1;  opacity: 0.8;}
.below-2 {  z-index: 3;  right: 100px;}
.below-3 {  z-index: 4;  right: 400px;}
.on-top {  position: absolute;  width: 50px;  right: -30px;  top: 150px;  background: pink;  z-index: 5;  padding: 20px;}
.on-top h1 {  font-size: 20px;}
#video {  position: absolute;  z-index: 4;  width: 1024px;  height: 768px;  background: rgba(0, 0, 0, 0.4);}

<div id="resized-container">  <div id="scaled">    <div id="scale-info">
    </div>    <div class="content">      <h2 class="below below-1">        I have z-index 1      </h2>
      <div class="on-top">        <h1>          I should always be on top.<br /> I have z-index 5        </h1>      </div>
      <h2 class="below below-2">        I have z-index 3      </h2>      <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>      <h2 class="below below-3">        I have z-index 4      </h2>    </div>  </div></div>

---

Related Topics