Twitter bootstrap 3 flexbox和bootstrap3列溢出布局，导致不希望的页面宽度增加

我有一个利用列和列的布局

在较高的层次上，我试图实现的布局如下：

工具栏和其他内容相邻地弯曲（虚线框是弯曲的子项）：

非工具栏部分（绿色、蓝色和黄色框）是一行bootstrap3，有三列（列是虚线框）。在大屏幕上，布局应该像图像一样（meta+主要内容是

col-md-7

，次要内容是

col-md-5

，次要内容是

col-md-12

），但默认为在小屏幕上分开行（所有

col-sm-12

）：

最后，元内容和主内容（绿色和蓝色框）相邻弯曲（虚线框是弯曲的子项）：

棘手的是，主要内容（蓝色部分）可能会变宽，并且必须水平滚动。我遇到的问题是，当溢出的内容部分变得更大时，它似乎会人为地将屏幕推得更宽，并脱离引导列的边界

下面是一个简单的例子来说明这个问题。（您可能必须单击“完整页面”链接才能查看溢出问题。）

有没有办法绕过这个问题

.flex{
显示器：flex；
}
.flex变量{
flex:1自动；
/*弹性：1*/
}
w-100{
宽度：100%；
}
.overflow-h{
溢出-x：自动；
}
div{
边框：1px灰色实体；
}

内容泛滥
工具栏
元数据
元数据
元数据
元数据
内容内容内容内容内容内容内容内容内容内容
内容内容内容
次要的
次要的
没有溢出的内容
工具栏
元数据
元数据
元数据
元数据
内容
内容
次要的
次要的

如果我理解正确，请尝试以下方法：

添加和修改css，如下所示：（工具栏可以有任何固定宽度px/rem/vw/percent，flex变量应该根据工具栏宽度计算可用宽度）

并将id添加到工具栏div

<div id="toolbar">toolbar</div>

工具栏

---

您可以通过多种方式实现这一点，但您的容器应该具有一定的宽度，以防溢出。

因此，如果内容是col-md-7，第二个1是col-md-5，那么什么是内容元数据和工具栏？引导基于12列布局。@JonathanChaplin为了清晰起见，我添加了更多图像。

<div id="toolbar">toolbar</div>