Содержимое элементов div внутри родительского элемента с переполнением «overflow-x: scroll; white-space: nowrap» из фона

Question

При следующей разметке HTML / CSS ( пример в реальном времени ),

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;">
    <div style="width:100%;background:yellow;">text text text text text text text</div>
    <div style="width:100%;background:yellow;">text text text text text text</div>
</div>

содержимое внутренних элементов будет автоматически переноситься.Я не хочу этогоОднако, если я использую white-space: nowrap на внешнем элементе div, желтый цвет фона внутренних элементов div не распространяется на конец их содержимого.

Как я могу исправить эту разметку, чтобы содержимое внутреннего элементаdivs не переносит и все их содержимое отображается на желтом фоне?

Answer 1

Вот одно решение, которое, кажется, делает то, о чем вы, как мне кажется, просите :

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;white-space:nowrap">
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text text text text</div><br>
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text</div>
</div>

Обратите внимание на свойство display: inline-block, использование min-width вместо width и тег <br> между элементами div.

Честно говоря, это похоже на действительно уродливый клуг. Я не могу не думать, что должен быть лучшим способом для достижения этого результата.