Сделайте так, чтобы дочерний div внутри родительского div определенной ширины имел полную ширину окна браузера

Заполнитель div будет работать только если у вас статический height на .bonus-box контейнере, который также может быть установлен на заполнителе. Поскольку вы говорите, что вам нужно, чтобы он автоматически увеличивал и уменьшал свой размер на основе контента, это не сработает, так как div заполнителя не знает динамический размер вашего .bonus-box (если вы не используете JavaScript, но это может определенно обрабатываться чистым способом CSS).

Теперь самым простым решением было бы установить .bonus-box и .placeholder-div на одну и ту же высоту и сделать с ним. Кроме того, необходимо будет поместить <div class="placeholder-div"></div> после .bonus-box div; в противном случае, бонус окно будет отображаться под заполнителем div так, что, где ее последний известный статическое положение в потоке страницы.

Пример JSFiddle здесь.

Для этого вам нужно будет изменить оба свойства height чтобы он содержал контент плотно, всякий раз, когда текст был добавлен или удален из бокса box div.

Но если вы хотите сделать это более сложным, но более простым в обслуживании способом, то, что вы, вероятно, захотите сделать, это структурировать его так, чтобы родительский контейнер имел min-width 1190px. Прямые дети этого контейнера тогда будут определять их width как 1190px. Однако бонус-бокс (теперь он стал одним из этих прямых детей) установил бы его width на 100%.

HTML:

<div id="wrapper-main">
    <div class="content-main">
        <p>Sed ut est augue. Etiam ullamcorper, leo a tincidunt commodo, felis justo posuere diam, non tempus libero purus a mauris. Integer suscipit et lectus sollicitudin convallis. Nullam mattis lorem a dui mattis, vel molestie justo mollis. Duis leo felis, cursus vitae ornare condimentum, sagittis non odio. Cras pulvinar ultrices ante, id tincidunt sem volutpat quis. Curabitur mollis ultricies nunc nec aliquam. Aliquam eleifend laoreet lacus, sit amet viverra lorem.</p>
    </div>
    <div class="wrapper-bonus">
        <div class="content-main">
            <p>Cras euismod tristique nibh non semper. Sed iaculis mi sit amet aliquam ultricies. Donec eros eros, auctor et sem vitae, fringilla condimentum nisi. Donec volutpat mauris sit amet convallis accumsan. Nam nec porttitor nulla, placerat suscipit leo. Nam tincidunt, urna a sagittis pulvinar, libero metus iaculis justo, quis fermentum dolor magna vel dui. Vestibulum consectetur mattis neque, at lacinia augue convallis nec. Fusce orci mi, auctor pretium gravida sit amet, feugiat et purus.</p>
        </div>
    </div>
    <div class="content-main">
        <p>Vivamus mollis quis lacus sed auctor. Integer ornare venenatis ultrices. Cras faucibus orci tincidunt enim sollicitudin ornare. Pellentesque dapibus iaculis ante, non imperdiet eros varius venenatis. Nulla facilisi. Cras iaculis tincidunt eros quis aliquam. Etiam mattis leo leo, ut varius tellus gravida non. Aenean id urna hendrerit, gravida leo sed, molestie nibh. Proin accumsan ultricies nulla, adipiscing ultricies urna posuere in. Vestibulum id eros leo. Etiam erat metus, vulputate sit amet lorem sed, adipiscing tempus enim. Nulla et massa sit amet nibh pharetra auctor. Curabitur odio odio, gravida eget nulla sit amet, placerat porta mi.</p>
    </div>
</div>

CSS:

#wrapper-main {
    min-width: 1190px;
    }

    .content-main {
        margin: 0 auto;
        width: 1190px;
        }

    .wrapper-bonus {
        width: 100%;
        background-color: #f80;
        }

JSFiddle здесь.

Конечно, делать это таким образом потребовалось бы немного реструктуризации в вашем коде... что может или не возможно по какой-либо причине.