При изменении width, теряет форму height 100vh?

Question

когда блоку выдаю height: calc(100vh - 50px); то все равботает, но если добавлю туда и width 650px; к этому же блоку, то творится бред, по высоте блок становится примерно по центру высоты, не понимаю как такое исправить (чисто для телефонов, у пк все нормально отображается)

.wrapper {
    width: 650px;
    margin: 0 auto;
}

.content {
    margin: 0 auto;
    width: 650px;
    height: calc(100vh - 50px);
    background: #0ff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/m-messages.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
    <title>VKT Friends</title>
</head>
<body>
    <div class="wrapper">
        <div class="content">


            


        </div>

        <?php
            include "nav/nav.php"
        ?>

    </div>

</body>
</html>

Answer 1

Видимо content="width=device-width" берет вашу заданную ширину 650px, масштабирует до ширины экрана девайса и заодно пропорционально масштабирует высоту

БЛОГ НА HUSL

При изменении width, теряет форму height 100vh?

Ответы (1 шт):