一种解决方法是使用flexbox布局和JavaScript来实现可滚动内容。

首先，在HTML中创建一个容器，将要滚动的内容放在容器内：

然后，在CSS中设置容器的样式，使用flexbox布局使其具有自适应高度，并隐藏溢出的内容：

#scroll-container {
  display: flex;
  overflow: hidden;
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
}

接下来，使用JavaScript来计算容器的高度以及内容的高度，然后根据需要设置滚动条的样式和行为。

const container = document.getElementById('scroll-container');
const content = document.querySelector('.scroll-content');

function updateScroll() {
  // 计算容器的高度
  const containerHeight = container.clientHeight;
  // 计算内容的高度
  const contentHeight = content.scrollHeight;

  // 如果内容高度超过容器高度，则显示滚动条
  if (contentHeight > containerHeight) {
    container.style.overflowY = 'scroll';
  } else {
    container.style.overflowY = 'hidden';
  }
}

// 当窗口大小改变时，更新滚动条状态
window.addEventListener('resize', updateScroll);

// 初始化时，更新滚动条状态
updateScroll();

此代码通过比较容器的高度和内容的高度来判断是否显示滚动条。根据需要，可以添加更多样式和功能，如自定义滚动条样式、滚动到指定位置等。