jquery选项卡不是全宽的

我使用jquery.tabs（）来显示图形（每个选项卡一个）。当我加载页面时，第一个选项卡显示的图形与它应该显示的完全一样。当我点击其他任何一个选项卡时，图形完全被压缩到大约30px宽。我有我的css设置，使图形宽度应该是100%。当我单击inspect element时，图形将展开以填充整个空间，这是应该的。如果单击下一个选项卡，或返回到原始选项卡，图形将再次被压扁，直到我检查它们为止。如果我将css中的宽度设置为精确的宽度而不是100%，那么它们显示得很好。但是，我希望我的页面能够响应屏幕大小，所以这不是我想要的选项。以下是html和javascript：

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">APIXU</a></li>
        <li><a href="#tabs-4">Open Weather Map</a></li>
        <li><a href="#tabs-5">Weather Underground</a></li>
    </ul>
    <div id="tabs-1">
        <div id="div7" class="errorChart"></div>
    </div>
    <div id="tabs-4">
        <div id="div8" class="errorChart"></div>
    </div>
    <div id="tabs-5">
        <div id="div9" class="errorChart"></div>
    </div>
</div>

那么，图形的大小是合理的，但不要扩展到500px以外，即使我的屏幕上的可用空间约为1000px。（如果我单击inspect元素，它们就会展开。）如果我这样设置css：

div.errorChart{
    min-width: 500px;
    height: 450px;
}

div.errorChart{
    width: 100%;
    height: 450px;
}

然后这些图被完全压扁，直到我检查它们。有人知道为什么会这样吗？我是否必须将宽度设置为一个固定的数字，或者是否有办法保持其响应性