CSS问题：隐藏滚动条且内容溢出时div/textarea无法调整大小求解决

当元素（如textarea）同时设置overflow-y: auto、resize: vertical，并通过::-webkit-scrollbar { display: none; }隐藏滚动条后，一旦内容溢出，元素将无法拖动调整大小。使用overflow: clip虽能恢复resize功能，但会禁用滚轮滚动，只能通过键盘操作，不符合需求。

可行解决方案：嵌套容器分离功能 #

通过外层容器负责resize和隐藏滚动条，内层容器负责内容滚动，实现三者需求的兼容：

CSS 代码

.resize-container {
  width: 500px;
  height: 50px;
  resize: vertical;
  overflow: hidden;
  /* 跨浏览器隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
}

.resize-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.content-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* 内层滚动条同样隐藏 */
  scrollbar-width: none;
}

.content-wrapper::-webkit-scrollbar {
  display: none;
}

HTML 代码

<div class="resize-container">
  <div class="content-wrapper">
    <textarea style="width:100%; height:100%; border:none; outline:none; resize:none;">This can be resized.</textarea>
  </div>
</div>
<br><br>
<div class="resize-container">
  <div class="content-wrapper">
    <textarea style="width:100%; height:100%; border:none; outline:none; resize:none;">This can now be resized! 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit autem fugit corporis amet quas sint aliquid quae cum, porro magni. Labore ducimus quam impedit atque soluta, possimus quis fuga explicabo?
Ad velit magni repellendus? Adipisci, autem corrupti voluptatem alias distinctio quis. Veniam ab atque assumenda omnis reiciendis doloremque? Animi quaerat sunt culpa dignissimos officia ipsam sequi a sit nobis deserunt!
Sit eveniet fugiat quia vero, laboriosam exercitationem libero minima atque velit, fuga sint veritatis molestias dolor dignissimos blanditiis harum sunt! Veritatis sunt deleniti eligendi tenetur quod? Non aspernatur blanditiis eum.
Sunt placeat quibusdam odio, accusantium inventore nesciunt dolorem corrupti voluptatum, delectus sed saepe porro nobis, officia assumenda! Illo totam magnam odio perspiciatis omnis pariatur velit temporibus, consequuntur recusandae repellat quo!
Voluptates modi sapiente dolores accusantium reprehenderit facere inventore debitis amet delectus sint officiis assumenda incidunt rerum quasi laborum illum eligendi, excepturi est. Dolorum explicabo eius iure asperiores harum quisquam alias.
Sequi veniam asperiores sit adipisci modi suscipit rerum neque obcaecati id tempore assumenda dignissimos unde placeat itaque totam, labore ratione ipsam quos et voluptatibus ipsum incidunt animi cum nisi. Est.
Quaerat cum sapiente ab ratione quisquam, modi voluptate iusto, sed corporis omnis, quos tempora. Fugiat quidem quod ducimus quam sequi alias dicta repudiandae commodi nihil aliquid quia dignissimos, consectetur dolor.
Ab nemo nostrum maiores. Expedita molestias blanditiis obcaecati commodi sapiente dolore cum ducimus dignissimos, similique dolores vel, voluptatem laudantium repellendus consequuntur provident nostrum ex minus modi possimus! Sunt, delectus repudiandae.
Eum, ab. Suscipit amet quia obcaecati harum excepturi quod modi et eum laudantium, esse nulla fuga alias mollitia ea, dolor vitae doloremque in aliquam quae dolores accusamus. Nemo, natus quod.
Harum quam reiciendis itaque assumenda facere magnam cum tenetur, alias voluptate blanditiis odit nobis vitae error molestias non incidunt repudiandae? Quo aut, at iusto veritatis consectetur asperiores vero natus eveniet.</textarea>
  </div>
</div>

原理说明 #

1. 外层容器resize-container设置resize: vertical和overflow: hidden，负责提供拖动调整大小的功能，并裁剪内层容器的滚动条使其不可见；
2. 内层容器content-wrapper设置overflow-y: auto，负责内容的滚动逻辑，同时隐藏自身滚动条；
3. 内部textarea移除自身resize和边框，确保完全适配容器大小，不干扰外层的resize操作。

该方案同时满足隐藏滚动条、支持垂直resize、保留滚轮滚动三个核心需求，且兼容主流浏览器。

内容的提问来源于stack exchange，提问作者SolidShook