Question

I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/

When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.

What can I do to prevent this? Can I prevent this?

What I have tried so far:

• using the CSS white-space: nowrap; property, but it seems that this
  isn’t the best solution.
• simply leaving space below the red box, but this really influences the design too much.

What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.

Answer 1

What do you want to happen instead?

If you make the gray box position relative and set it’s overflow to hidden, the red box gets cut off.

.div1 {
    height: 62%;
    background-color: grey;
    overflow: hidden;
    position: relative;
}

DEMO

Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn’t clear at all what you want it to do.

Updated demo