Как растянуть div со всем содержимым на всю ширину окна

Появилась потребность растянуть блок на всю ширину экрана. Структура блока:

.wrap{
    display: inline-block;
}
.wrap span{
    padding: 1vw;
    background: #000;
    color: #fff;
    font-size: 2.5vw;
    font-family: Arial;
}

<div class='wrap'>
    <span>hello world!</span>
</div>

При этом изменять размер шрифта или какие либо свойства дочерних элементов div.wrap нежелательно, либо делать это как-то пропорционально. Ниже нарисовал схему как есть сейчас и как должно получится в итоге.

Если с картинками все понятно, как и какими методами их растягивать, то вот с блоками я информации не нахожу. Буду благодарен за вашу помощь в этом вопросе.