【问题标题】：Bootstrap 4.2.1 Flex-box layout column overflowing browser edgeBootstrap 4.2.1 Flex-box 布局列溢出浏览器边缘
【发布时间】：2019-05-25 00:49:48
【问题描述】：
使用 flex-basis 作为列宽。为什么 COLUMN02 会超出浏览器的边缘？我究竟做错了什么？不幸的是，它没有显示在代码 sn-ps 中，但它显示在小提琴中。蒂亚！
http://jsfiddle.net/dragontheory/37b8vkoa/1/
html,
body {
min-height: 100vh;
/* force footer to bottom of browser */
height: 100%;
/*for IE11*/
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.column01 {
-webkit-box-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
background-color: rgba(0, 0, 0, 0.1);
}
.column02 {
-webkit-box-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col column01 d-flex flex-column">COLUMN01</div>
<div class="col column02 d-flex flex-column">COLUMN02</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
【问题讨论】：
标签：
css
layout
flexbox
bootstrap-4
【解决方案1】：
这是您的自定义 CSS 造成的：
.column02 {
flex: 0 0 auto;
}
.col {
width: 100%;
}
...翻译成：
-
flex-grow: 0（不允许 flex 增长这个元素）
-
flex-shrink: 0（不允许 flex 缩小这个元素）
-
flex-basis: auto（从width 获取flex-basis - 由.col 设置为100%）
无论子级的widths 的总和超过父级的width，这都会阻止该列的width 到其父级的width 并且不允许它缩小.
在.column02 上设置任何 项将修复它：
flex-shrink: 1width: auto; flex-grow: 1;flex-basis: 0; flex-grow: 1;flex: 1;
或者只是remove flex: 0 0 auto;（因为.col 已经设置了flex-basis: 0; flex-grow: 1; - 上面的第三种情况）。
加法：
为了使您的可调整大小的面板正常工作，我建议将整个所需的标记放在一列中：
$(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
})
html,
body {
min-height: 100vh;
height: 100%;
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 210px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 120px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>