Свойство css border-box не работает с большим значением дополнения

в соответствии с MDN, который я прочитал, "border-box" сообщает браузеру о том, что для каждой границы и заполнения используется значение, указанное для ширины и высоты. Если вы установите ширину элемента до 100 пикселей, то 100 пикселей будут содержать любую границу или дополнение вы добавили, и поле содержимого будет уменьшаться, чтобы поглотить эту дополнительную ширину "

но в моем случае я установил два div:

    <style type="text/css">
    .container{
        width: 300px;
        height: 300px;
        background: blue;
        margin: auto;
    }

    .child{
        width: 150px;
        height: 150px;
        background: yellow;
        border: 2px solid red;
        box-sizing: border-box;
        padding: 200em;
    }
</style>

<body>
    <div class="container">
        <div class="child">
            <h1>test</h1>
        </div>
    </div>


</body>

Я установил контейнер div box с высотой и шириной 300px, дочерний div с высотой и шириной 150px с свойством border-box, но после того, как я дал большое значение дополнения для дочернего div-поля с 200em контейнерная коробка не сокращается до поглотите дополнительную ширину. Мне интересно, почему?

0
источник поделиться
1 ответ

Это две отдельные вещи. border-box не ограничивает размер, это просто означает, что конечный размер включает границу и дополнение. Поэтому, если внутренний ящик имеет границу и дополнение, и он расширяется до 400 пикселей, размер будет 400 пикселей, включая границу и дополнение.

Одна настройка, которую вы можете сделать для вашего css, для тестирования, состоит в том, чтобы сделать внешний div 300px, независимо от размера внутреннего:

/* add min and max. */
.container {
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    background: blue;
    margin: auto;
}
0
источник

Посмотрите другие вопросы по метке или Задайте вопрос