使用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';