Как заставить родительский div разворачиваться дочерней шириной div/padding/margin/box?

Я хочу развернуть div parent с дочерним div, но я не знаю, возможно ли это и как это сделать.

Я готовлю fiddle и включил некоторый код.

CSS

        body {
            background: gray;
        }
        div.page {
            color: white;
            background: black;
            max-width: 72em;
            margin: auto;
            padding: 1em;
        }
        div.one {
            background-color: red;
            width: 40%;
        }
        div.two {
            background-color: green;
            width: 120%;

HTML

  <body>  
    <div class="page">
            <div class="one">
            One
            </div>
            <div class="two">
            Two
            </div>
    </div>
  </body>

Ответы

Ответ 1

Ключевым решением вашей проблемы является использование display:inline-block;

HTML

<div class="page">
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

CSS

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    margin: auto;
    padding: 1em;
    display:inline-block;
}
div.one {
    background-color: red;
    width: 10em;
    display:inline-block;
}
div.two {
    background-color: green;
    width: 40em;
    display:inline-block;
}

Вот рабочий fiddle

Ответ 2

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

Ваш запрос CSS некогерентен.

Кроме того, чтобы увидеть, что элемент растет шире окна, один из родителей должен иметь возможность вести себя таким образом, в основном, переполнение содержимого и оставаться видимым. (html/body или parent)

насколько я знаю только:

display:

table
inline-table
table-row
table-cell

Позволяет контейнеру расти так же, как и контент.

Ответ 3

Ваша проблема заключается в следующем:

div.two {
        background-color: green;
        width: 120%;
}

Вы говорите ребенку, что он составляет 120% от ширины родительской, то есть всей ширины плюс на 20% больше. Сделайте 100%, и вы получите ожидаемый результат.