Question

我试图在flexbox中使用jQuery UI＆resizable（）方法（也许这就是问题所在？但我说不太可能）。

我有3列，我希望左右列可以调整大小，并使中心列占用任何剩余空间。我的CSS看起来像这样：

.container {
  display: flex;
}

.col-left,
.col-right {
  width: 200px;
}

.col-center {
  flex: 1;
}

左列适用于此jquery：

$('.col-left').resizable({
  handles: 'e'
});

调整大小时添加的唯一属性是width，但是当我将其用于右列时：

$('.col-right').resizable({
  handles: 'w'
});

添加宽度和左侧属性。左边的房产真的搞砸了布局。它将左列拉到中心柱上，同时也用宽度将其压扁，因此最终结果非常糟糕。在我的检查员中，如果我删除左侧属性，它似乎工作正常。

我已经在这里阅读了几次文档，但是我不知道如何将其关闭。

这是我用笔重新创建问题的笔： http://codepen.io/dustindowell/pen/NPyaBL

解决方法是侦听resize事件并只覆盖CSS，但这看起来很糟糕。

$('.col-right').resizable({
  handles: 'w'
}).on('resize', function() {
  $(this).css({
    left: 0
  });
});

更新：

经过一番挖掘后，我发现这是一个jQuery UI错误。

Answer 1

我也遇到过同样的问题。

我找到了另一种解决方法：Overriding inline styles in CSS。由于.col-right[style]{ left:0 !important; }更改了内联样式，因此您可以执行以下操作：

.css()

这将永久覆盖它;每次尺寸变化时，您都不需要致电{{1}}。