当尝试使页面响应时，Div被切断

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
}

.item {
  flex: 1 1 200px; /* 每个项目至少200px宽，并且可以增长和收缩 */
}

@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 在小屏幕上改为垂直排列 */
  }
}

.container {
  overflow-x: auto; /* 在需要时显示水平滚动条 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 添加间距 */
}

.item {
  flex: 1 1 calc(33.33% - 10px); /* 每个项目占据三分之一宽度减去间距 */
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
}

@media (max-width: 600px) {
  .item {
    flex: 1 1 100%; /* 在小屏幕上每个项目占满一行 */
  }
}