css，float:left，将文本保留在自己的列中

我有两个float：左元素彼此相邻。当父元素太窄，无法在一行中同时容纳两个文本时，我希望文本向下移动到下一行，但每个文本都在各自的“列”中。父宽度是灵活的，所以我不知道它将是什么

说明了问题以及我希望解决方案是什么样子

<div id = "page2">
    <div class = "f1">
        float 1
    </div>
    <div class = "f2">
        float 2 and long
    </div>
</div>

#page2 {width:110px; }  

.f1{ 
  background:pink; 
 float:left;
}

.f2{
    background:yellow;
    float:left;
}

浮动1
浮动2和长
#第2页{宽度：110px；}
.f1{
背景：粉红色；
浮动：左；
}
.f2{
背景：黄色；
浮动：左；
}

简单。使用

显示：表格单元格用于两个div

当页面缩小或展开时，div将位于同一位置，并相应地将文本展开或缩小。
如果我是你，我将使用

display: table-cell

我更新了你的小提琴
您可以将第2页的css更改为这样

#page2 {
    display: inline-block;
    width: 150px;
}

尝试在第2页添加css

这将解决您的问题
我认为您应该增加页面宽度不，我不能。这就是重点。使用空白：现在如果不想增加页面宽度，请删除#page2使用字体大小：12px；在不带显示的第2页中：内联块？没有什么是十全十美的我认为有趣的是，每个人都非常反对使用表格进行布局，以至于他们不得不创建另一种基本上制作表格的方法：）
display: inline;