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