我正在开发一个主要基于 flexbox 的用户界面，它基本上可以分解为一个内容区域和一个可以切换的侧边栏(它的宽度通过添加/删除一个类来改变)。
切换侧边栏时，内容区域会通过 javascript 手动调整大小。它包含需要重绘的 svg Canvas ，因此无法通过 CSS 完成。 Chrome 可以完美地处理这段代码。
但是，Firefox 和 Safari 的行为非常奇怪，而且有趣的是，它们的行为方式并不相同。
我能够在 fiddle 中重现该行为:http://jsfiddle.net/q1yp6ssw/21/
常规 <div> 也会发生这种情况, 它不仅仅是 <svg>正如你在这里看到的:http://jsfiddle.net/mqok5exb/2/
toggleSidebar()调用函数 resizeSvg()它使用其父元素的大小调整“svg”元素的大小。
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
如果您在 Firefox 中测试这些 fiddle ，您会注意到内容区域过早调整大小，并且变得比应有的更大，将侧边栏推到容器的原始尺寸之外。 使用setTimeout延迟调整大小不起作用。
这似乎是时间问题，以及每个浏览器何时呈现父元素的更新大小。 没有转换的行为是相同的，所以这不是问题。
我的问题:是什么原因造成的，我该如何解决，或者至少找到一个可用的解决方法？如果是 flexbox 的问题，那么可以更换 flexbox。
谢谢!
最佳答案
我知道这是旧的，但我正在尝试做类似的事情，在我的例子中，使用 javascript( Angular )更改 width 导致比计算的宽度低 50px。
如果您想为 flex 设置准确的值，您应该使用您的 javascript 代码同时设置 width 和 min-width。
这是解决我问题的代码:
el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';
关于javascript - 使用 javascript 问题更改 flexbox 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29777756/