Can Overflow:Hidden Affect Layout

Can overflow:hidden affect layout?

It is because overflow: hidden, among other properties, introduces a new block formatting context.

You can read about the effects in this great article:
The magic of overflow: hidden

UPDATE: I've rewritten your jsFiddle into something that is working (tested on Chrome). Instead of defining margin-left on the #red and #blue (which would act differently due to overflow: hidden), I've put a margin-right on #yellow.

Why does hidden content affect layout, even with overflow hidden on the parent?

Your .ui.steps element has display inline-flex: therefore it's an inline element that is represented by a line box (https://www.w3.org/TR/2007/WD-css3-box-20070809/#line-box.).

It will occupy at least one line-height of vertical space in it's parent element, in this case the body element.

To illustrate that try reducing the font-size and line-height of your body: you'll see the space shrink. Of course hacking font-size is not a good solution, you can't even make it totally disappear because most browser will ignore font sizes of 0.

Edit : as @cmprogram have said, using display: none is usually the best move here.
Also, there is no such thing as display:hidden, I think you are confusing with visibility:hidden

Deleting overflow:hidden changes the layout

if you do not want to keep the overflow:hidden; propertie, wich triggers layout to be calculated including floatting element contained, you may use another value : overflow:auto; or use another technique.

overflow:auto/*hidden*/; , display:inline-block/*inline-table/table/table-cell*/; , float:left/*right*/; triggers layout.

Else you can add a last extra element or pseudo-element displayed not inline with clear:both/*right/left*/;, it is a communly called clearfix method.

some explanation here : http://css-tricks.com/all-about-floats/

Overflow hidden breaks layout

Simply add vertical-align:bottom; to the .bottom class and the buttons will appear inline again.

See this updated fiddle: http://jsfiddle.net/HNx8f/4/

.button{
    display: inline-block;
    vertical-align:bottom;
    width: 24px;
    height: 24px;
    background: red;
    position: relative;
    overflow: hidden;
    border: 0;
    text-indent: -9999px;
}

Check out W3 Schools for a full list of the properties you may use, however in your case any of these should help you:

• top
• middle
• bottom

Strange effect of CSS overflow hidden vs. visible on position of parent element

From CSS 2.2 spec

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

So adding overflow:hidden is stopping the margins from collapsing.

Overflow: Hidden causing content layout issues

Ok After tons of trail and error, this is the only way I found to do exactly what you want

pen here https://codepen.io/anon/pen/BrzpgY

This is not that flexible because you have to define a max-height on the container which need to be high enough to show the image but not too high that it shows too much text.

The main issue here is you are trying to show this in an unnatural as far as how the content works. You want the image to show which means it needs to be outside of the content and if it is outside then your floated image won't let your text wrap because the text is in a block element. The element must remain block because you need to give it a max height for animation.

We can't set overflow visible on expand because what it does is it just shows the content right away which is why you see that button in front of text because the text will just show, the animation is useless at this point.

While the below code works but it is not dynamic. I strongly suggest you make a compromise somewhere, either put the image with the text and have the fade hide part of the image or show the text on the left side like you had. The only other option is maybe use js to calculate height on click then set a bunch of things but I really think that is over complication for this

$(".expand-button").on("click", function() {

  $(".row").toggleClass("-expanded");

  if ($(".row").hasClass("-expanded")) {

    $(".expand-button").html("Collapse Content");

  } else {

    $(".expand-button").html("Continue Reading");

  }

});

.imageReplacement {

  background-color: red;

  width:225px;

  height:225px;

  float: right;

  margin-left: 25px;

  position: relative;

  z-index: 1;

}

.test-subheading {

  margin: 0;

  padding: 2px 0;

}

.container {

  width: 1000px;

}

.row {

  position: relative;

  max-height: 320px;

overflow: hidden;

  transition: max-height .5s ease;

}

.row.-expanded {

  max-height: 1500px;

}

.row:not(.-expanded) .row-content::after {

  content: '';

  position: absolute;

  top: 200px;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

}

.special-text > p {

  font-size: 16px;

  margin-top: 15px;

}

button {

  position: absolute;

  bottom: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="row">

    <div class="row-content">

      <h1>Test Heading</h1>

      <img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>

      <div class="sectionSubheadings">

        <h3 class="test-subheading">This is test text. This is test text. </h3>

        <h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>

        <h3 class="test-subheading">This is test text.</h3>

      </div>

        <p>

         Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.

        </p>

        <p>

          Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.

        </p>

        <p>

          In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.

        </p>

        <p>

         Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.

        </p>

        <p>

          In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.

        </p>

    </div>

    <button class="expand-button">

        Continue Reading

      </button>

  </div>

</div>

Why is flex layout affected by its overflow content?

Because an initial setting of a flex container is flex-shrink: 1. This means flex items are allowed to shrink, and will do so to prevent overflowing the container.

Your .aside element has no content, so the algorithm shrinks the width to 0 to give the sibling more space and ensure nothing overflows the container.

You can override this setting with flex-shrink: 0 (meaning shrink is disabled).

.cont {

    width: 200px;

    height: 300px;

    background-color: red;

    display: flex;

}

.aside {

    width: 50px;

    height: 100%;

    background-color: green;

    flex-shrink: 0;            /* new */

}

.nav {

    overflow: hidden;

    flex: 1;

    background-color: aqua;    /* adjusted color for readability */

}

.info {

    max-width: 70%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    word-wrap: normal;

}

<div class="cont">

    <div class="aside"></div>

    <div class="nav">

        <div class="info">

            <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span>

        </div>

    </div>

</div>

What is the difference between overflow:hidden and display:none

Example:

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.

display: none; will just hide the block.

Note you have also visibility: hidden; which hides the content of the block, but the block will be still in the layout, moving things around.

Why does overflow property impact element size and flow?

According to definition "If the container element is itself contained by something else, the floated div will sit on the right margin of the container."

Case 1: The .container is covering the total space available. The .content is taking all the space except the .float(the .content is not of shape rectangle here), that's what floating is. Its actually overflowing to cover the space. Its the default behaviour.

Case 2: Now you tell the .content to hide the overflow. So it hides the overflow it was earlier doing as a default behaviour.

Case 3: You tell the .content to take the full width of the parent, i.e. .container, so it ignores the overflow:hidden and just expands to fill the space.

If you are wondering the weird behaviour of overflow:hidden, check this ARTICLE

Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

To put it most simply, it is because a block box with an overflow that isn't visible (the default) creates a new block formatting context.

Boxes that create new block formatting contexts are defined to stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto (the spec calls these boxes block formatting context roots):

10.6.7 'Auto' heights for block formatting context roots

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

[...]

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

This was not the case in the original CSS2 spec, but was introduced as a change in CSS2.1 in response to a different (and much more pressing) issue. This answer offers an explanation for the changes. For this reason, it seems quite apt to call it a side effect, although the changes were very much intentional.

Also note that this is not the same thing as clearing floats (clearance). Clearance of floats only happens when you use the clear property and there are preceding floats to be cleared:

• If you have an element with clear: both that's a sibling of the outer element in your example, the floats will be cleared but the outer element will not stretch.

• If you have a similar element (or pseudo-element) as the last child of the outer element instead (making it a following sibling of the floats), the outer element will stretch downward in order to contain the bottom edge of that element, and for a zero-height element that essentially means the bottommost edge of the floats. This technique is known as "clearfix" because the element (or pseudo-element) has no other purpose than to force the outer element to contain the floats by way of clearance within it.

---

Related Topics