使用 javascript 问题更改弹性框宽度答案

【问题标题】：Changing flex box width with javascript issue使用 javascript 问题更改弹性框宽度
【发布时间】：2015-06-28 22:36:03
【问题描述】：

我正在开发一个主要基于 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可以换掉。

谢谢！

【问题讨论】：

你甚至不想看看 IE11 会发生什么。严重的错误。
@JaredT，我在 Linux 机器上的 Chrome 和 Firefox 中摆弄它，并让朋友在 Safari 中测试它。我只能想象 IE 会用这个做什么。

标签： javascript html css firefox flexbox

【解决方案1】：

我知道这很旧，但我正在尝试做类似的事情，在我的情况下，使用 javascript（角度）更改 width 会导致比计算的宽度低 50 像素。如果您想为 flex 设置准确的值，您应该使用您的 javascript 代码同时设置 width 和 min-width。

这是解决我问题的代码：

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

【讨论】：