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/
我真的希望我帮助