我有两个div：
#left{overflow: hidden;}
#right{float: right; width: 300px; margin: 0 0 0 20px;}
<div id='right'><p>Content</p></div>
<div id='left'><p>Content</p></div>
我已经计算了很多，只要将两个div并排浮动，但允许左div填充剩余区域。
我现在的问题是：
当屏幕变小或有人从较小的屏幕/设备查看我的网站时，我左边的div中的文本仍保留在一个非常长的列中，远远超出右列的高度。
我希望将两个div并排放置，左边的内容填充剩余的区域，但是一旦左边的内容传递了右边div中内容的长度，有没有办法让它在下面流动正确的div？而不是超越？
示例：
