Html 强制div比浏览器窗口更宽

我如何才能强制DIV比浏览器窗口更宽，以水平容纳它的子对象，而不是强制它们在新行上

即用小提琴来考虑下面的代码。容器元素内部有6个子元素，所有子元素的最小宽度为200px，所有子元素都设置为float:left。当窗口调整到足够宽时，它们都在一行上。当范围缩小时，他们开始向新行推进。理想情况下，我希望它们保持在一行，并让浏览器显示一个滚动条

.container{
}
.子元素{
最小宽度：200px；
浮动：左；
高度：100px；
}
.儿童1{
背景颜色：紫色；
}
.儿童2{
背景颜色：橙色；
}
.儿童3{
背景色：黑色；
}
.儿童4{
背景颜色：绿色；
}
.儿童5{
背景颜色：蓝色；
}
.儿童6{
背景色：红色；
}

您可以为父元素提供

宽度，也可以使用
float:left带
显示：内联块和
空白：nowrap

.container {
   white-space: nowrap;
}

.child-element {
    min-width: 200px;
    display: inline-block;
    height: 100px;
}


对于每个元素之间
4px
的
空白
，可以使用
左边距：-4px

为容器增加一个巨大的宽度是可行的

.container {
  width: 999999px;
}

虽然我不知道你为什么要这样做，但从可用性/界面的角度来看。
不要浮动子项，而是将它们设置为inline block，并在容器上设置
空白：nowrap

.container {
    white-space:nowrap;
}

.child-element {
    display:inline-block;
    min-width: 200px;
    height: 100px;
}

只需将
.container
设置为
显示：表格
，将
子元素
设置为
显示：表格单元格
，并从
中删除
浮动：左
。子元素
：

.container {
    display: table;
}

.child-element {
    min-width: 200px;
    display: table-cell;
    height: 100px;
}

仅供参考，它适用于可以有多个嵌套元素级别的工作流设计器。某些元素应该是并排的，比如Then/Else子句，当Else被强制置于Then之下时，它们就变得更难阅读了。我明白了，某种形式的树状视图不是更好吗？我真的不知道你在做什么，但imo水平+垂直滚动通常会导致非常混乱的界面，除非你的目标是触摸屏。同样，这是一个相当无知的观点。我想到了一棵树，但它会很烦人，因为需要大量的拖放。为了在设计和故障排除时提高效率，树实际上需要保持完全扩展，这将给我们留下同样的问题。VisualStudio 2012中的工作流基础设计器非常类似于我要做的。我基本上和OP有同样的问题，这个答案是最好的解决方案。我加的东西漂浮在容器上。这为容器提供了子容器的宽度，而不是容器边界框的宽度。元素之间的空白实际上是html中子标记之间的物理空白（空格、制表符、换行符），以级联的任何字体/大小呈现。要消除这种情况，您可以设置
字体大小：0.container {
    display: table;
}

.child-element {
    min-width: 200px;
    display: table-cell;
    height: 100px;
}