Jquery ui jqueryui手风琴滚动条

我有一个jqueryUI手风琴，看起来很棒。我将有大约10节（标题），这将正好适合在屏幕上。然而，在一个较小的屏幕上，它会切断我的部分标题。（我已经可以通过缩小浏览器窗口来模拟这种情况）。如果手风琴标题不垂直，如何显示滚动条

手风琴被包装在一个div中，没有设置选项。这就好像需要一个最小的div高度来确保所有的标题都可以出现，并为部分内容留出一些空间

我的全部代码如下：

  <script>
  $(function() {
    $( "#settingsnavigation" ).accordion({ 
      heightStyle: "fill",
      clearStyle: true, 
      autoHeight: false }
    );
  });
  </script>

<div id="settingsnavigation" style="width:220px">
  <h3>General</h3>
  <div>
      <div class="settingsubsection">User</div>
      <div class="settingsubsection">Security</div>
      <div class="settingsubsection">Units &amp; Ranges</div>
      <div class="settingsubsection">Notifications</div>
      <div class="settingsubsection">Vehicles</div>
      <div class="settingsubsection">Device</div>
  </div>
  <h3>Financial</h3>
  <div>
      <div class="settingsubsection">Balance</div>
      <div class="settingsubsection">History</div>
      <div class="settingsubsection">Purchase</div>
  </div>
  <h3>Vehicle: Cadillac Seville STS</h3>
  <div>
      <div class="settingsubsection">General</div>
      <div class="settingsubsection">Units &amp; Ranges</div>
      <div class="settingsubsection">Select Reminders</div>
      <div class="settingsubsection">Edit Reminders</div>
  </div>
</div>

$（函数（）{
$（“#设置动画”）。手风琴（{
高度样式：“填充”，
没错，
自动高度：false}
);
});
一般的
使用者
安全
单位及；范围
通知
车辆
装置
财务
平衡
历史
购买
车辆：凯迪拉克塞维利亚STS
一般的
单位及；范围
选择提醒
编辑提醒

container div的CSS应该是

overflow: auto;

---

请提供代码和/或JSFIDLE示例当我缩小浏览器时，手风琴的较低标题/部分会被切断，没有滚动条。