css - HTML element background horizontal scroll bug -

css - HTML element background horizontal scroll bug -

this css:

.content { background-color: #fff; position: relative; margin: 45px 10px 0px 10px; } #logdata { font-family: "courier new"; font-size: 13px; line-height: 1.3; margin-left: 0px; color: #000; } .logmess { color:#000; padding: 4px 5px 2px 3px; min-width: 100%; } .logmessbg { color:#000; padding: 4px 5px 2px 3px; min-width: 100%; background: rgb(245, 245, 245); }

and html:

<div class="content"> <div id="logdata"> <p class="logmessbg">some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p> <p class="logmess">some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p> </div> </div>

and problem horizontal scroll. because backgroud ends when <p class="logmessbg"> text ends, want end when longest <p> text ends. so, want background width width.

here screen:

add display: inline-block; .content or #logdata this:

jsfiddle - demo

.content { background-color: #fff; position: relative; margin: 45px 10px 0px 10px; display: inline-block; }

html css