CSS - width vs. height - width has priority

Question

I encountered quite a specific problem that doesn't seem to be addressed anywhere. When I have both fixed width and height on a containing div, then any text inside the div only overflows vertically, but not horizontally.

Example here: http://jsfiddle.net/TgPRM/1382/

#container {
   height:50px;
   max-height:50px;
   width:50px;
}

Now what is even stranger width has priority even if I wrap the text inside a paragraph and set a fixed height/max-height (but not width!) on that paragraph. The text chooses to disrespect the height set on its parent element, and instead respect the width set on its grand-parent element.

Example here: http://jsfiddle.net/TgPRM/1377/

My question is, why is given width so much priority and what can we do for the text to overflow horizontally rather than vertically?

Edit: I want to keep overflow:visible so any solution based on overflow property does not address my problem. White-space:nowrap seems a bit extreme solution, as it doesn't even respect browser window dimensions (try a very very long text). Thus, I accepted Evan's solution as it works exactly as I expected already my example to work.

Answer 1

It's not priority — it's simple word wrapping. You can check it if your word'll be very long (http://jsfiddle.net/sergdenisov/y4wkmvcs/1/):

<div id="container">
    <p>hello_this_is_a_very_long_long_long_long_paragraph</p>
</div>

You can't fit any content in container with fixed width and height. If you want it, you shouldn't use fixed width and height — maybe use min-width or min-height.

If you want content overflows container only horizontally, you could do it this way (http://jsfiddle.net/sergdenisov/5079bkdr/):

p {
    background-color:green;
    height:50px;
    max-height:50px;
    display: inline-block;
    white-space: nowrap;
}

It all depends on your specific problem.

Answer 2

Would this suffice?

http://jsfiddle.net/TgPRM/1385/

#wrapper{
    position:relative; 
    margin:0;
    padding:0;
}

#container{
height:100px;
max-height:100px;
width:50px;
background-color:red;
}

p {
    background-color:green;
    height:50px;
    max-height:50px;
    position:absolute;
    padding:5px;
}

<div id="wrapper">
    <div id="container"><p>hello this is a very long long long long paragraph</p></div></div>