无法让滚动条出现在溢出时

我正在构建一个 MDI WEB 应用程序，并且有一个由article元素，具有header and a section对于内容。由于它是一个 MDI 应用程序，article被设定为absolute，因此它可以与其他窗口重叠。我需要一个滚动条出现在内容部分，但不在header.

<article id="win3">
    <header> … </header>
    <section> … </section>
</article>

CSS:

article {
    position: absolute;
    min-width: 500px;   
    width: 918px;
    margin: 0px;
    padding: 0px;
    overflow: hidden; 
    background-color: white;
    border-style: ridge;
    border-color: #ddd;
    border-width: 4px;
}
article>section {
    /* reduce diameter of rounded corner to match the inside curve of the border */
    border-radius: 10px;
    -moz-border-radius: 10px;
    display: block;
    overflow: auto;
    border: none;
    width: 100%;
    background-color: white;
    padding: 10px 10px 10px 20px;
    min-height: 50px;
    height: 100%;
}

它看起来像overflow: auto在 Firefox (v 22) 中被忽略，但滚动条确实出现在 Chrome 中。

关于如何在内容部分需要时可靠地制作滚动条有什么想法吗？

您的关键问题是填充值，因此您需要在文章>部分中设置宽度减少一些百分比

article>section {
    /* reduce diameter of rounded corner to match the inside curve of the border */
    border-radius: 10px;
    -moz-border-radius: 10px;
    display: block;
    overflow: auto;
    border: none;
    /*width: 100%;*/
    width: calc(100% - 30px) /* or set fixed width percentage like 90% */
    background-color: white;
    padding: 10px 10px 10px 20px;
    min-height: 50px;
    height: 100%;
}