Haven't understood how the "hidden" value of the "overflow" property work in the step 35 of "Learning typography by building a nutrition label"

In step 35 of this challenge, after I had added the “overflow” property with the “hidden” value to the class calories-info h1 used to style the h1 element, the height of this box became longer than before once it had not been given the property with the value. The content must have been clipped so that it could fix the container as what I had read in MDN about the hidden value. overflow - CSS: Cascading Style Sheets | MDN.
Well, I am so confused, I guess I have not understood clearly about CSS and its properties yet. So can anyone please help me out why we have to give the overflow property with the hidden value to the class to in this case? thanks.
Link to the challenge: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-35

3 Likes

Look carefully when there is no overflow: hidden
Screenshot 2022-05-20 at 7.04.37 PM

The specified property is used so that the 230 will fit in the box

hi, and thanks for the answer, now I’ve noticed the difference when there was no overflow: hidden. But as what I had read on MDN about the hidden, content is clipped if necessary to fix the padding box, but in this case, the content wasn’t only clipped, but the box’s height also got expanded so that the 230 fit the box. Could you please explain to me about that? Thanks.

2 Likes

I have the same question!!

1 Like

I’ve just reached Step 35 and I have the same question. I’ve read multiple articles explaining the use of the overflow property with hidden as its value, and they all state that the content should be cropped. I don’t understand why the box (class=“label”) would expand instead.

2 Likes

So I’ve been looking into this, and I think I understand how it works.

Here is the html Code for Step 35:

<div class="label">
  <header>
    <h1 class="bold">Nutrition Facts</h1>
    <div class="divider"></div>
    <p>8 servings per container</p>
    <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
  </header>
    <div class="divider lg"></div>
    <div class="calories-info">
      <p class="bold sm-text">Amount per serving</p>
      <h1>Calories <span class="right">230</span></h1>
    </div>
 </div>

As you can see in the CSS code below, the span element with text “230” is floated to the right. Floated elements are taken out of the normal flow of the document, and the container doesn’t account for the height of the floated element (in this case “230”), causing the text to not fit inside the h1 border.

.right {
  float: right;
}

However, when we apply “overflow: hidden” to the h1 element which contains the inline span element, the border of h1 moves down enough to contain the text “230,” instead of clipping it.

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

This is due to the effect overflow: hidden has on float elements. Setting “overflow: hidden” to an element causes a new float context, so elements inside the element with “overflow: hidden” applied will be contained within the container. Thus, in our example, this results in the h1 element containing the floating span element (230), rather than clipping it.

Here are the resources I read through to understand this phenomena:

2 Likes

Thank you! …was struggling with that.

It may be wrong, but here goes the line of thought I followed:

Since span is a float element (the class right floats the content to the right), it escapes the normal flow of the block model. Naturally, you would expect the increased font-size of the span element (from 1em to 1.2em (step 34) to extend its father element height, since it has not been stablished (only the width was stablished (270)); but span is a float. And floats aren’t considered by their parents: “only children in the normal flow are taken into account” (CSS spec §10.6.3). That’s why span overflows, first of all. Secondly, when you specify that .calories-info-h1’s overflow is hidden, you create “a new block formatting context” (MDN) containing the float, in which child elements gets contained inside its parents (MDN). Instead of being clipped, span is contained inside its parents, respectively extending h1, div.calories-info and div.label heights (+8.75). In other words, .calories-info-h1 becomes a mini-layout inside its parent divs.

1 Like