HTML 滚动容器 | 添加漂亮边框及最大宽度 input 元素

.scroll-container {
  border: 2px solid #ccc;
  border-radius: 5px;
  max-width: 300px;
  max-height: 200px;
  overflow: auto;
  padding: 10px;
}

input[type='text'] {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

在上面的代码中，我们创建了一个 class 为 'scroll-container' 的 div 元素作为滚动容器。我们给它添加了一个 2 像素宽的边框，圆角为 5 像素，最大宽度为 300 像素，最大高度为 200 像素。如果内容超出容器大小，将会出现滚动条。

我们还使用了 overflow 属性设置为 auto，这意味着只有在内容超出容器大小时才会显示滚动条。

在滚动容器中，我们添加了多个 input 元素作为示例。这些 input 元素的展示宽度被设置为 100%，即占满父容器的宽度。我们还为它们添加了一像素的边框、圆角为 3 像素，并设置了一些内边距和外边距。

你可以根据需要调整滚动容器和 input 元素的样式。