html - An h3 element is not filling a div with a horizontal scroll bar correctly -

here 2 snap shots of problem.

see how yellow background of h3 cut off?

here jsfiddle

here code:

    <style>         .outputdiv {             background-color: lightcyan;             overflow: auto;             border: solid 2px black;             width: 500px;         }          h3 {             margin-top: 0px;             background-color: yellow;         }     </style>       <div class="outputdiv">         <h3>my title here</h3>         <pre> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor  incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse                 </pre>     </div> 

i know add div background color contain h3, h3 block level element.

any ideas?

even though <pre> block level element, behavior of it's content different in case. since content must maintain line breaks , spaces, <pre> tag uses attribute white-space: pre; default. in case, both <pre> , <h3> elements behave block elements, width set parent. however, text inside <pre> element doesn't follow these rules , overflows, causing scrollbar show on parent.

in case you're using pre tag monospace font, can apply white-space: normal rule <pre> element.

otherwise, if html structure isn't requirement, can add overflow: auto <pre> element instead, , remove wrapper element.

pre {   overflow: auto;   margin-bottom: 0; } 

edit: in case want entire div scrollable, add wrapper div around <h3> , <pre>, , set it's display inline-block. force inner wrapper take it's width it's content, , force block level <h3> match width. check out this fiddle demo. introduce vertical scrollbar, removing margin-bottom <pre> should fix that.

edit 2: yup, here's fixed fiddle.