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

Question

[denidip]

Собственно ниже пример, хоть inline хоть float всеравно див не тянется больше ширины экрана, можно ли сделать так средствами css чтоб все дочерние блоки выстраивались без переноса? Если задать фиксированную ширину больше суммы длин всех дочерних блоков, то все становится как нужно, но дело в том что ширина не известна, пока на ум приходит только вычислять ширину js

<style>
    .one {
        background-color: #006c8a;
        height: 50px;
        padding: 20px;
    }
    .two {
        background-color: #000000;
        width: 50px;
        height: 50px;
        display: inline-block;
    }
</style>
<div class="one">
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>

Answer 1

[Павел Радьков]

На обертку .one поставить white-space: nowrap;, на дочерних элементах .two обнулить: white-space: normal;. Overflow поставить по вкусу.

Пример: codepen.io/paulradzkov/pen/MYejpP