zjk zjk - 4 months ago 6
CSS Question

Why is this child div not contained in the parent div's blue background?

Here is the code:



.wrapper {
overflow: auto;
width: 300px;
height: 200px;
background-color: #f00;
}

.t0 {
height: 100px;
background-color: #00f;
}

.t0 .s1 {
font-size: 30px;
color: #fff;
}

<div class="wrapper">
<div class="t0">
<div class="s1">aaaaaaaaaaaaaaaaaaaaaabbbbbaaaaaabbba</div>
</div>
</div>





I want the
div.s1
contained in
div.t0
's blue background.

I found the fact that
div.s1
and
div.t0
both are 300px in width very confusing.

I'm looking for the related specs about how width is determined in css spec, but failed.

Questions:


  1. How can one make
    div.s1
    contained in
    div.t0
    's blue background

  2. Where are the related specs of this behavior?



Update:
Thank you for the prompt answers! I want to add that I do not want to wrap the long text. I'm confused why are
div.s1
and
div.t0
300px in width instead of something like 500+px

Answer

If you want the whole word's background to be blue,

Try this
(added display: inline-block; to t0)

Or this
(added display: inline-block; to s1)

Comments