How to understand the computed width of the block containing `white-space: pre;` with/without `float`?

user_14478846 0
Viewed 41

As you can see the code below, div is the outermost scrolling container and the core in this topic section is a containing block with spans set as white-space: pre;.

One section is extremely simple and is just a block. The other .floated is set float: left;.

But the computed width of them is different: the former is just as wide as its containing block div i.e. 100px in this case, in contrast to the latter is as wide as its contents, around 1287.47px(given by Firefox). To make this difference more observable, I set a background color for both of them.

So the question comes:

  1. My understanding is that the width of a block with width: auto; depends on its contents. Why is the first section not?
  2. The expected effect is achieved by using float: left;, as .floated shows, but why and how does it work? What exactly does the float do? A new BFC? But if I change float to display: flow-root; which also creates a new BFC, it still doesn't work.

Thanks in advance for your help!

div {
  border: 1px solid red;
  width: 100px;
  overflow: auto;
}

section {
  background-color: teal;
}

span {
  white-space: pre;
}

.floated {
  float: left;
}
 <div>
    <section>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
      <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
      <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
      <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
      <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
    </section>
  </div>
  
  <div>
    <section class="floated">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
      <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
      <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
      <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
      <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
    </section>
  </div>

Online Demo

css
1 Answers

My understanding is that the width of a block with width: auto; depends on its contents.

It doesn't. The width of a block level element should respect this formula:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

As you can see, the content play no role in defining the width of your element and it will end with a width equal to its containing block (parent element). That's why you have the logical result of 100px. After defining the width, the content should try to fit that width but you have disabled line breaks with white-space: pre so all you will get is an overflow.

When, you make the div floated you need to consider another part of the Specification that describe the width of floating elements and you can read:

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

The content is considered in the "shrink-to-fit" algorithm.

In your case, since you are using white-space: pre you are not allowing any line break so the "preferred minimum width" will be the winner and you will end have a width equal to the longest sentence

If you disable the white-space, you will force line breaks and your content will try to fit the "available space" and both cases will give the same result even if we have different algorithm involved

div {
  border: 1px solid red;
  width: 100px;
  overflow: auto;
}

section {
  background-color: teal;
}


.floated {
  float: left;
}
<div>
    <section>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
      <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
      <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
      <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
      <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
    </section>
  </div>
  
  <div>
    <section class="floated">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis earum totam sequi, optio iusto neque sed! Reiciendis fugit, dolor.</span>
      <span>Molestias consequuntur ipsam quod eligendi, temporibus a quos accusamus aliquid molestiae est blanditiis voluptatibus minus ipsum nisi odio tempora sed!</span>
      <span>Suscipit, similique. Dolor possimus non doloribus voluptatibus necessitatibus, quas, consequatur hic provident quo neque sequi? Nesciunt, ratione laudantium rem quis!</span>
      <span>Voluptate delectus, quis laboriosam animi esse, et perspiciatis, cupiditate, porro itaque officiis laudantium quidem. Quos culpa facilis, nesciunt itaque officiis.</span>
      <span>Expedita ex error a explicabo deserunt, consectetur illum quod veritatis. Odio pariatur quae minima quasi, minus itaque architecto illo delectus.</span>
    </section>
  </div>

user_86203330
Related