我用HTML/JS/CSS Flexbox实现了我自己的分割窗格.
在下列情况下我遇到分离器问题 - 其中一个面板具有固定大小(以px为单位),另一个面板设置为grow(flex-grow: 1).
如果其他面板有子尺寸,则不会滚动到最后.它会卡在儿童的大小.
这可以通过分裂窗格面板上的CSS修复,但不能修复孩子吗？
使用flex对我来说非常重要,因为我希望保持应用程序的响应能力,并希望尽可能避免使用固定大小.
这是 我的问题的JSFiddle示例.
代码片段如下.谢谢!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div'); …