显示2个列表视图，其中一个可以滚动

<div class="container">
  <div class="list">
    <h2>List 1</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="list scrollable">
    <h2>List 2 (Scrollable)</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
    </ul>
  </div>
</div>

.container {
  display: flex;
}

.list {
  flex: 1;
  padding: 10px;
}

.scrollable {
  overflow: auto;
  max-height: 200px;
}

// 数据获取和渲染逻辑
const list1 = document.querySelector('.list:first-child ul');
const list2 = document.querySelector('.list:last-child ul');

// 获取数据并渲染到列表视图中
fetch('data/list1.json')
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      list1.appendChild(li);
    });
  });

fetch('data/list2.json')
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      list2.appendChild(li);
    });
  });