Css Can'；无法在溢出时显示滚动条

我正在构建一个MDI WEB应用程序，有一个由

文章

元素创建的窗口，其中包含

标题

和内容的

部分。由于它是一个MDI应用程序，
文章
被设置为
绝对
，因此它可以与其他窗口重叠。我需要一个滚动条显示在内容部分，而不是
标题中

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

在Firefox（v22）中，似乎忽略了
溢出：auto
，但在Chrome中确实出现了滚动条

在内容部分需要滚动条时，有没有关于如何使滚动条可靠的想法？
您的关键问题是填充值，因此您需要在文章>部分设置宽度减少一定百分比

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;
    height:100px;
}
article>section {
    /* reduce diameter of rounded corner to match the inside curve of the border */
   overflow:auto;
   height:100%;
   border:none;
   display: block;
   padding: 10px 10px 10px 20px;
    min-height:50px;
}

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%;
}

谢谢你的快速回复。但这并没有解决问题。在进行了建议的更改后，滚动条不再出现在Chrome中，它也不会出现在Firefox中。嗨，Calc很酷-我不知道。我在Chrome中获得了滚动条，但在Firefox中仍然没有成功。对于chrom使用-webkit-calc（100%-30px）和Firefox使用-moz-calc（），但请注意至少safari 6.0可以工作。所以我建议使用固定宽度，比如98%，嗯，有些不太正确。即使我以像素为单位设置了一个固定的大小，它仍然无法获得滚动条。当我查看页面时，Firefox在该部分周围画了一个轮廓，它显然超出了文章的范围。但是Firefox仍然没有显示滚动条。啊，我搞错了。是最小值把事情搞砸了。它允许该项目小于允许的最小值。
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%;
}