创建一个带有内部滚动条的可拖动、可调整大小的 div 容器

Creating a draggable, resizable div container with inner scrollbars

我有一个容器，由一个外部 div 和一个滚动的内部 div 组成，就像这样：（注意这是我实际做的精简版）

HTML:

<div class="faq-clone">
    <div class="faq-clone-content">
        Some text goes here.
    </div>
</div>

CSS:

.faq-clone {
    overflow: auto;
}

.faq-clone-content {
    overflow: auto;
    width: 375px; 
    max-height: 400px;
}

想法是让 .faq-clone 可拖动和调整大小，但结果滚动条仍然只出现在内部 div、faq-clone-content 上。我正在使用现有项目，所以我只是通过在 jQuery 中添加 .draggable() 开始，如以下小提琴所示：

http://jsfiddle.net/jessikwa/5LrL3/2/

很简单，它仍然可以正常工作。要调整大小，我知道 CSS 需要更改。我将 .resizable() 添加到 .faq-clone 并调整了 CSS 以便外部容器具有 width/height 设置并将溢出设置为隐藏，如这个小提琴所示：

http://jsfiddle.net/jessikwa/5LrL3/4/

容器大小调整正常，但内部滚动条丢失。在 .faq-clone 上更改 overflow:hidden 似乎不是答案，但如果没有它，我会在外部 div 上获得滚动条，这是不可取的。关于如何设置 CSS 以实现此目的有什么想法吗？

使用 jQuery 将 faq-clone-content 设置为其父 faq-clone 的大小似乎可以解决问题。

$(".faq-clone-content").css('height', faqClone.height() + 'px');

参见fiddle：http://jsfiddle.net/jessikwa/5LrL3/9/