如何删除由可调整大小的div引起的不必要的填充？

Question

我有一个 div，需要水平调整大小。尽管添加 css resize 属性后，div 会获得不必要的填充。经过几次搜索后，我不确定这是否可能，但这确实让用户界面看起来很丑陋。附上下面的 div 代码和屏幕截图。我正在使用 React 和 Tailwind。任何帮助将不胜感激。

        <section 
className='bg-[#26252a] min-w-[285px] p-0 min-h-[70vh] overflow-scroll resize-x rounded-xl'
>

</section>

我尝试设置

padding: 0 !important

，但仍然没有用。如果您看到右侧的盒子模型，您可以看到组件本身没有填充量，但它仍然存在。

示例 JS 小提琴 - https://jsfiddle.net/Sam_Hawkz/n91gyu7x/1/#&togetherjs=l45GaPxBKQ

Answer 1

您将溢出设置为

scroll

，这使得 “用户代理在水平和垂直方向上显示滚动条......无论是否有任何内容溢出或剪切。” 将溢出更改为

auto

。这是一个工作示例。