Please Help: <code>, nowrap and vertical scrollbars issue. *Screenshots

I am having trouble with these freakin' <code> tags and it's driving me crazy.

I am trying to allow a horizontal scrollbar when there is no break in the line, but I want the box to automatically adjust to the proper height depending on how many lines there are, so NO vertical scrollbars ever need to be shown.

Sometimes it works and sometimes it doesn't.

Here's an example:


Notice how the box doesn't adjust to the line height, and you can't even see the text.


In this screenshot, the box height expands to a certain point, then stops, thus creating the need for vertical scrollbars.

I JUST want the box to expand however high it needs to so that it NEVER needs vertical scrollbars.

This is what my CSS looks like right now:

div.code_child {
    background-color: #F4F4F4;
    color: #000000;
    margin:0px; padding:6px;
    border:1px inset; 
    width:95%; 
    overflow:auto;
}

code {
	white-space:nowrap;
	
}

Code (markup):

I would greatly appreciate if anyone could help me solve this problem.

 

Why don't you add height property?

 

Aye, try playing around with min-heights, max heights, height and overflow-y and overflow-x.