При указании max-height контент не отображаеться

Question

html, body{
    padding: 0;
    margin: 0;
    background-color: yellow;
}

header{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    background-color: green;
    width: 100%;
    max-height: 350px;
}

.header_logo{
    max-height: 320px;
    width: 25%;
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    width: 13%;
    height: 13%;
    background-color: black;
}

.header_info{
    max-height: 320px;
    width: 60%;
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info{
    width: 30%;
    height: 5%;
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивная Верстка</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="media.css" type="text/css">
</head>
<body>
    <div class="wrapper">
        <header>
            <div class="header_logo">
                <div class="logo"></div>
            </div>
            <div class="header_info">
                <div class="info"></div>
            </div>
        </header>
        <div class="container">
            <div class="main">
                <div class="column"></div>
                <div class="column"></div>
                <div class="column"></div>
                <div class="column"></div>
                <div class="column"></div>
                <div class="column"></div>
            </div>
            <div class="main_txt">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veritatis maxime totam debitis sed in ab consequuntur maiores. Officiis harum voluptatum at quos rerum quibusdam, labore minus a, magni in. Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Molestias voluptatibus ut quam quidem, veritatis, inventore odit labore! Perferendis quam illum nemo, unde quidem dolor exercitationem necessitatibus minima temporibus vitae quibusdam.</p>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Cumque laudantium ad, natus nemo, ullam voluptatibus ratione! Adipisci, atque, exercitationem. Eveniet dicta dolorum totam commodi ipsa cum iure ipsam nisi sequi? Lorem ipsum, dolor sit amet consectetur adipisicing elit. In, debitis dicta minus incidunt provident. Dolore, veniam, odit. Commodi tempore, obcaecati illo, fugiat fugit perspiciatis, similique recusandae nostrum eum, reprehenderit sit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ratione aspernatur maxime autem at rerum, quia quis aperiam ut voluptas repudiandae dignissimos? Dolores aperiam, voluptas, asperiores soluta officia veniam tempora! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione similique, placeat omnis sunt culpa, quis dolorem accusamus adipisci nihil pariatur, dolor odit impedit magni mollitia delectus tempore non recusandae tempora!</p>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

Answer 1

max-height ограничивает максимально возможную высоту блока, но не указывает его размер. У Вас header_logo и header_info не имеют содержимого, поэтому из высота, так как она явно не задана, равна 0 Попробуйте добавить какое-нибудь содержимое, хотя бы просто букву, тогда у блока появится размер

БЛОГ НА HUSL

При указании max-height контент не отображаеться

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