overflow: hidden on non floating element causes it to shrink

Question

I am wondering why the overflow: hidden property causes the border of the <h2> tag, Who Knew CSS Had Such Power?, to not appear underneath the right-floated sidebar <div>?

Here is my HTML code:

<div class='sidebar'>
    <h2>NOTE</h2>
    <p class="note">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
</div>

<h2>Who Knew CSS Had Such Power?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>

Here is my CSS code:

h2 {
    border-top: 2px solid rgb(141,165,22);
    border-bottom: 2px solid rgb(141,165,22);
    overflow: hidden;
}

.sidebar {
    width: 30%;
     float: right;
     margin: 10px;
     background-color: rgb(250,235,199);
     padding: 10px 20px;
     border: 1px dotted rgb(252,101,18);
}

Here is an example with overflow: hidden and Here is an example without overflow: hidden.

Answer 1

As mentioned, block boxes with overflow: hidden (or any other value than visible) establish new block formatting contexts. This has a number of bizarre side effects with respect to floats, one of which is exactly what you're seeing. From the link:

Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. This particular behavior is specified in the following paragraph:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

Here's what it looks like with overflow: auto for example:

Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.

The image depicts a somewhat different setup from what you have, but the principle is the same: an in-flow box that establishes a block formatting context must not overlap the margin box of any floats in the same block formatting context as itself. If this box is a block box with an auto width, it becomes narrower; otherwise, it's pushed either to the side (away from the float), or down if there is no room for the former.

Answer 2

Adding overflow: hidden; creates new block formatting context

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

---

For additional context see this post...

Why do inline elements behave like block level elements when floated?

Answer 3

It is not that the over-flow hidden is affecting the H2 right border. You only had border properties set for the top and bottom of your H2 tag. You could fix this by either adding settings for right, right and left, or just blanket border properties.

/* border-right */
h2{
  border-right: 2px solid rgb(141,165,22);
  border-top: 2px solid rgb(141,165,22);
  border-bottom: 2px solid rgb(141,165,22);
} 

/* border-right and border-left */
h2{
  border-right: 2px solid rgb(141,165,22);
  border-left: 2px solid rgb(141,165,22);
  border-top: 2px solid rgb(141,165,22);
  border-bottom: 2px solid rgb(141,165,22);

}

/* blanket border */
h2{
  border: 2px solid rgb(141,165,22);
}