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

Question

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:

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

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 1

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)

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

Sign up