CSS - 打破了浮動和非可包裝的DIV

Question

好吧，這是很難解釋，我有兩個元素，一個浮動DIV和非可包裝的DIV，它的HTML看起來是這樣的：

<div id='page'> 
    <div id='left'> 
    some information 
    </div> 
    <div id='center'> 
    do not break this 
    </div> 
</div> 

這是CSS：

#center{ 
    text-align: center; 
    white-space: nowrap; 
} 
#left{ 
    float:left; 
} 
#page{ 
    width: 800px; 
    background-color: #999; 
} 

結果：

的容器（#page）我š可調整大小，可以去更小的，像100px的，這裏是我有我的問題，#center DIV不斷的權利，即使是在容器外：

我需要#center DIV去下#left當容器小這樣的：

這是對的jsfiddle代碼：https://jsfiddle.net/p41xh4o3/

謝謝您的幫助！

Answer 1

好吧，我做到了用 「柔性」，我的3個要素，這是CSS：

#left{ 
    white-space: nowrap; 
    flex-grow: 0; 
} 
#center{ 
    text-align: center; 
    white-space: nowrap; 
    background-color: #88AA88; 
    flex-grow: 1; 
} 
#page{ 
    width: 100px; 
    background-color: #999; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

這是的jsfiddle：https://jsfiddle.net/p41xh4o3/2/

Answer 2

我沒有使用Flexbox的它，首先你得對父母做display: flex;和flex-wrap: wrap。
這樣的：

#page{ 
    background-color: #999; 
    display: flex; // this one makes it a flex box 
    flex-wrap: wrap; // this one tells it to wrap when all children cannot fit next to each other 
} 

然後，你必須給flex-basis: 50%父的兩個孩子：

#center{ 
    flex-basis: 50%; 
    background-color: red; 
} 
#left{ 
    float:left; 
    flex-basis: 50%; 
    background-color: green; 
} 

我給他們的背景，所以你可以看到他們，看看它是如何工作的。將flex-basis想象爲元素的寬度。所以如果你想#left有寬度：30％，你會做這樣的事情：

#center{ 
    flex-basis: 70%; // notice how this one is 70% because 100% - 30% = 70% 
    background-color: red; 
} 
#left{ 
    float:left; 
    flex-basis: 30%; 
    background-color: green; 
} 

這裏是一個工作的jsfiddle： https://jsfiddle.net/odnecaLu/4/
我真的希望我幫助