Content background cut off

Question

Scroll to the right and you'll see the background is truncated:

 div { width: 300px; overflow: auto; } p { background: green; } 

 <div> <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p> </div> 

Why does it happen? What's the solution?

Answer 1

Try this code

this is because p doesn't get its actual width

p {
    background: green;
    float: left;
}

 div { width: 300px; overflow: auto; } p { background: green; float:left; } 

 <div> <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p> </div> 

Answer 2

use the width and overflow in the same element as background . i have edited the snippet

 div { width: 300px; overflow: auto; } p { display: inline-block; background: green; } 

 <div> <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p> </div> 

Answer 3

<div>
  <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
</div>  


div {
      width: 300px;
      overflow: auto;
    }

    p {
      background: green;
    overflow: auto;
    }

Fiddler link https://jsfiddle.net/o0eqoqmh/

Answer 4

Or you can just set p as inline or inline-block element

 div { width: 300px; overflow: auto; } p { background: green; display: inline-block; /* OR display: inline; */ } 

 <div> <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p> </div>