Проблема с горизонтальной прокруткой

Question

Я собираю макет для новой компоновки HTML. Это почти есть, но я получаю раздражающую проблему с горизонтальной прокруткой, происходящую на моей панели заголовков.

Хотя содержащиеся элементы имеют ширину 100%, заголовок, кажется, обрезается до горизонтальной области прокрутки.

html, 
body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: purple; 
} 
#wrapper { 
    width: 100%; 
    height: 100%; 
    background: Red; 
    min-width: 100%; 
    position: relative; 
} 
header { 
    height: 48px; 
    width: 100%; 
    min-width: 100%; 
    background: Orange; 
} 

Я поставил макет в скрипкой здесь: https://jsfiddle.net/8k51k83r/

Обратите внимание, что если вы перечисляете горизонтально, заголовок, кажется, заканчивается там, где начинается горизонтальная прокрутка.

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

Answer 1

Вы можете добавить это: #wrapper{width:auto; display:inline-block;}