使用JavaScript问题更改Flex框的宽度

Question

我正在一个主要基于flexbox的用户界面上工作，基本上可以将其分解为一个内容区域和一个可以切换的侧边栏（通过添加/删除类来更改其宽度）。

边栏切换后，内容区域将通过javascript手动调整大小。 它包含一个需要重新绘制的svg画布，因此无法通过CSS完成。 Chrome可以完美地处理此代码。

但是，Firefox和Safari的行为非常奇怪，有趣的是，它们的行为方式不同。

我能够在小提琴中重现该行为： 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中测试这些小提琴，您会注意到内容区域调整得太早了，并且变得超出了应有的大小，将侧栏推到了容器的原始尺寸之外。 使用setTimeout延迟调整大小不起作用。

时间安排以及每个浏览器呈现父元素的更新大小时似乎都存在问题。 没有过渡 ， 行为是相同的 ，所以这不是问题。

我的问题：是什么原因造成的，以及如何解决，或者至少找到了可用的解决方法？ 如果事实证明是flexbox问题，则可以更换flexbox。

谢谢！

Answer 1

我知道这很旧，但是我正在尝试做类似的事情，在我的情况下，使用javascript（角度）更改width导致比计算出的宽度低50px。 如果要为flex设置确切的值，则应使用JavaScript代码设置width和min-width 。

这是解决我的问题的代码：

el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';