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 span
s 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:
- My understanding is that the width of a block with
width: auto;
depends on its contents. Why is the firstsection
not? - The expected effect is achieved by using
float: left;
, as.floated
shows, but why and how does it work? What exactly does thefloat
do? A new BFC? But if I changefloat
todisplay: 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 >
<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>
CodePudding user response:
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 >
<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>