Why is the height of my <div> not changing when I try to change it using CSS?-CodePudding

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">

    </head>
    <body>
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div >{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        <div id="first">
        <input type="text" id="searchBar" name="searchBar">
        {% if current_user.is_authenticated %}
            <a href="{{ url_for('user', username=current_user.username) }}"><img src="{{ url_for('static', filename='profile-icon.png') }}" alt="" id="profileIcon"></a>
            <a href="{{ url_for('logout') }}" id="logout-btn">Logout</a>

        {% else %}
            <a href="{{ url_for('login') }}"><img src="{{ url_for('static', filename='profile-icon.png') }}" alt="" id="profileIcon"></a>
        {% endif %}
        </div>
        <div id="content-1">
            {% for post in posts %}
                {% if loop.changed(post.post_name) %}
                    <div >
                        <a href="{{ url_for('read', post_name=post.post_name) }}">
                        <img src="{{ url_for('static', filename='images/' post.title) }}" alt="">
                        </a>
                    </div>
                {% endif %}
            {% endfor %}

        </div>
    </body>
</html>

This is the template where I am having the problem

body {
    background-color: rgba(247,247,247,255);
}

#first {
    display: flex;
    flex-direction: row;
    height: 5vw;
    border: 10px solid black;
    justify-content: center;
}

#searchBar {
    height: 59%;
    width: 50%;
    margin-top: 0.7%;
    border-radius: 5px;
    padding-left: 10px;
}

#profileIcon {
    position: absolute;
    right: 15px;
    max-height: 5vw;
}

#logout-btn {
    position: absolute;
    right: 120px;
    max-height: 5vw;
    margin-top: 1.75%;
}

#content-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-i {
    max-height: 1px;
    display: block;
    margin-left: 45px;
    margin-top: 35px;
}

This is the CSS code for that template.

I am trying to change the height of the with the class "c-i" but it just does not change. It just takes up the dimensions of the image inside of the which is under that tag. I want it to have a maximum height of a few pixels for now but neither the height or the max-height property seem to have any affect.

CodePudding user response：

Your element height is more than the given height in css. If you want to apply your height you need to add overflow:'hidden' in your class.

CodePudding user response：

You need to look at this in 2 perspectives, how divs are block elements, and images default sizing https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block". https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width.

Aka your div will scale based on its contents by default, and any image by default is displayed at 100% of its height/width. So even if you set max-height on the containing div, your image sized at 100% by default, is indeed overflowing the container div as @Praveen correctly mentioned. Resolution? Style your image as inline-block and set its max-height to inherit, so its inheriting it from its parent