Html 保持DIV并排，如果DIV内容太大，则使页面水平滚动

我希望保持两个分区并排，无论右分区内容的宽度如何。左分区总是有非常短的行。右边的div可能有很长的行。如果行很长，我只希望整个页面可以水平滚动

以下是基本布局：

(div)
+--------------------------------------------------
| (div>pre)  (div>pre)
| +-------+  +-------------------------------------
| |line 1 |  |
| |line 2 |  |  Make the page horizontally scroll
| |line 3 |  |  if needed based on the width of
| |line 4 |  |  content in this div. Keep these
| |line 5 |  |  divs side by side.
| |line 6 |  |
| +-------+  +-------------------------------------
+--------------------------------------------------

以下是我的代码片段：

body，pre{
保证金：0；
填充：0；
}
#容器{
边框样式：实心；
边框颜色：蓝色；
空白：nowrap；
}
#容器：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
#边栏{
宽度：100px；
浮动：左；
边框样式：虚线；
边框颜色：绿色；
}
#主要{
浮动：左；
边框样式：实心；
边框颜色：红色；
}

第1行
第2行
第3行
第4行
第5行
第6行
Lorem ipsum dolor sit amet，献祭精英，
福
电子商务会议
二人世界
受到谴责
卷发

您尚未定义第二个块/右侧块的任何宽度

尝试使用以下方法：

---

为两个块定义宽度后，主

div

将并排保留。查看它，并让我知道它是否有效。

可能重复@truecam No，而不是重复。该问题的公认解决方案不符合该问题要求的条件。例子：

sidebar { width: 30%; float: left; }
main { width:68%; float: left; }