Невозможно получить полосу прокрутки для отображения переполнения

Question

Я создаю приложение MDI WEB и создаю окно, созданное элементом article, с содержимым header и 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 (ст 22), но полоса прокрутки появляется в Chrome.

Любые идеи о том, как я могу сделать прокрутку в случае необходимости в разделе контента?

Answer 1

Ваша ключевая проблема состоит со значением отступа, поэтому вам необходимо установить ширину уменьшения некоторый процент в вашей статье> раздел

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

Answer 2

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