如何使列在溢出时可滚动，但在溢出时使用展开

<div class="container" onclick="toggleContent()">
  <div class="content">
    <!-- 溢出的内容 -->
  </div>
</div>

.container {
  height: 200px; /* 设置容器的固定高度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative; /* 设置容器元素为相对定位，以便子元素绝对定位 */
}

.content {
  position: absolute; /* 设置子元素为绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto; /* 子元素溢出时可滚动 */
  display: none; /* 初始状态下隐藏子元素 */
}

function toggleContent() {
  var content = document.querySelector('.content');
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
}