我有一个使用 twitter-bootstrap-3 的布局列和 flexbox .
在高层次上，我试图实现的布局是这样的:
工具栏和其余内容紧挨着 flex (虚线框是 flex 的子项):
非工具栏部分(绿色、蓝色和黄色框)是 bootstrap3 的一行，三列(列是虚线框)。在大屏幕上，布局应该像图像一样(meta + 主要内容是 col-md-7，secondary #1 是 col-md-5，secondary #2 是col-md-12)，但默认在小屏幕上分隔行(所有 col-sm-12):
最后，元内容和主要内容(绿色和蓝色框)彼此相邻 flex (虚线框是 flex 的子项):
棘手的部分是主要内容(蓝色部分)可能会变得很宽并且必须水平滚动。我遇到的问题是，随着溢出的内容部分变大，它似乎人为地将屏幕推宽并逃离引导列的边界。
这是一个展示问题的简化示例。 (您可能必须单击“整页”链接才能看到溢出问题。)
有什么办法可以解决这个问题吗？
.flex {
display: flex;
}
.flex-variable {
flex: 1 1 auto;
/*flex:1;*/
}
.w-100 {
width: 100%;
}
.overflowable-h {
overflow-x: auto;
}
div {
border: 1px gray solid;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>overflowing content</h1>
<div class="flex">
<div>toolbar</div>
<div class="flex-variable">
<div class="row">
<div class="col-md-7">
<div class="flex">
<div class="text-nowrap">
<table>
<tr>
<td>metadata</td>
<td>metadata</td>
</tr>
<tr>
<td>metadata</td>
<td>metadata</td>
</tr>
</table>
</div>
<div class="flex-variable w-100 text-nowrap overflowable-h">
<table>
<tr>
<td>content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content</td>
</tr>
<tr>
<td>content-content-content-content-content-content-content-content-content</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-5">
<div>secondary-secondary-secondary-secondary-secondary-secondary</div>
</div>
<div class="col-md-12">secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary</div>
</div>
</div>
</div>
<h1>no overflowing content</h1>
<div class="flex">
<div>toolbar</div>
<div class="flex-variable">
<div class="row">
<div class="col-md-7">
<div class="flex">
<div class="text-nowrap">
<table>
<tr>
<td>metadata</td>
<td>metadata</td>
</tr>
<tr>
<td>metadata</td>
<td>metadata</td>
</tr>
</table>
</div>
<div class="flex-variable w-100 text-nowrap overflowable-h">
<table>
<tr>
<td>content-content</td>
</tr>
<tr>
<td>content-content-content</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-5">
<div>secondary-secondary-secondary-secondary-secondary-secondary</div>
</div>
<div class="col-md-12">secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
如果我理解正确，试试这个:
添加和修改您的 css，如下所示:(工具栏可以具有任何固定宽度 px/rem/vw/percent 并且您的 flex 变量应该根据工具栏宽度计算可用宽度)
#toolbar{width:200px;}
.flex-variable {
flex: 1 1 auto;
width: calc(100% - 200px);
}
并将id添加到toolbard div
<div id="toolbar">toolbar</div>
您可以通过多种方式实现这一点，但您的容器应该有一定的宽度以免溢出。
关于html - flexbox 和 bootstrap3 列的溢出布局导致页面宽度增加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49352255/