如何将选项卡栏视图中的三个图形转换为可滚动视图？

<div class="tab-bar">
  <ul>
    <li onclick="showTab(1)">图形1</li>
    <li onclick="showTab(2)">图形2</li>
    <li onclick="showTab(3)">图形3</li>
  </ul>
</div>

<div class="tab-content">
  <div id="tab1" class="tab">
    <img src="图形1.jpg" alt="图形1">
  </div>
  <div id="tab2" class="tab">
    <img src="图形2.jpg" alt="图形2">
  </div>
  <div id="tab3" class="tab">
    <img src="图形3.jpg" alt="图形3">
  </div>
</div>

.tab-bar {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
}

.tab-bar ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.tab-bar li {
  cursor: pointer;
}

.tab-content {
  width: 100%;
  height: 300px;
  overflow: auto;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

function showTab(tabIndex) {
  // 隐藏所有选项卡内容
  var tabs = document.getElementsByClassName("tab");
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
  }
  
  // 显示选中的选项卡内容
  var selectedTab = document.getElementById("tab" + tabIndex);
  selectedTab.classList.add("active");
}