使元素变小而不是让它下降到新行

Question

在我正在开发的这个布局中，在1124px且宽度较小的情况下，标题的绿色部分会变为新行。

如果视口减小宽度，同时在标题中保留一行中的所有内容，我怎样才能使它及其内容减小宽度？

现在，粉红色元素和绿色元素之间的比例是粉红色占据标题的20％，绿色占据宽度的剩余80％。

绿色内部的输入也应该调整宽度，因为其父级绿色部分的宽度也会变小。

以下是发生这种情况的链接：https://dl.dropboxusercontent.com/u/270523/help/new.html

根据要求，这是一个JSFiddle复制问题：http://jsfiddle.net/d7k43/

和基本的CSS：

#logo{
    height:100%;
    width:20%;
    min-width:225px;
    background:pink;
}
#input{
    height:100%;
    width:80%;
    background:green;    
} 

Answer 1

问题是#logo { min-width: 225px }。当0.2X = 225px时，X = 1125px总宽度。

您的绿色区域仍然占据总宽度的80％，但粉红色区域的宽度不会缩小到小于225px。因此，当窗口小于1125px时，粉红色区域将占据总宽度的20％以上，这会导致绿色区域被推到新线。

示例：500px宽度窗口：225px + .8 *（500px）= 625px＆gt; 500px的。