Why are my boxes creating height?

Asked

Viewed 37 times

1

In the first box I’m setting 6 inputs, and wanted to know why my other boxes are keeping up with the size of my box that has the 6 inputs.

My code:

<!DOCTYPE html>
    <html>
    <head>
        <title>Exemplo</title>
        <meta charset="utf-8">
        <style type="text/css">
            .conteudo {
                display: flex;
                flex-direction: row;
                /* justify-content: center; */
                align-items: initial;
                width: 100%;
                overflow-x: auto;
            }

            .card {
                background-color: #f1f1f1;
                min-width: 250px;
                margin: 10px;
                /*height: 200px;*/
                text-align: center;
            }
            @media (min-width:1330px) {
                .conteudo {
                    justify-content: initial;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <div class="conteudo">
                <div class="card">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                </div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
            </div>
        </div>
    </body>
    </html>

html css

2 answers

2

Buddy, you set the other boxes to the same class as the <div> of the inputs have...

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
    <meta charset="utf-8">
    <style type="text/css">
        .conteudo {
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            align-items: initial;
            width: 100%;
            overflow-x: auto;
        }

        .card {
            background-color: #f1f1f1;
            min-width: 250px;
            margin: 10px;
            /*height: 200px;*/
            text-align: center;
        }
        @media (min-width:1330px) {
            .conteudo {
                justify-content: initial;
            }
        }
    </style>
</head>
<body>
    <div>
        <div class="conteudo">
            <div class="card"> <!-- CLASSE CARD -->
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
            </div>
            <div class="card">2</div> <!-- CLASSE CARD -->
            <div class="card">3</div> <!-- CLASSE CARD -->
            <div class="card">4</div> <!-- CLASSE CARD -->
            <div class="card">5</div> <!-- CLASSE CARD -->
        </div>
    </div>
</body>
</html>

The style goes to all who have the same class

  • But I didn’t set the height in my card class, but how would I solve that problem ?

  • defining different names for class and applying width and height sizes with different values...

1


Your problem is here, you put it align-items: initial;, but it should be align-items: flex-start;. This behavior has nothing to do with a class name or something like what I’m going to explain below...

inserir a descrição da imagem aqui

A father who is a container flex will leave all children in mode stretch, because this is the default value of align-items of a container flex. So that means all the kids are gonna be the same height as their tall brother. To avoid this standard behavior you have to "align" all children at the top with align-items: flex-start;

.conteudo {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
}

.card {
    background-color: #f1f1f1;
    min-width: 250px;
    margin: 10px;
    /*height: 200px;*/
    text-align: center;
}
@media (min-width:1330px) {
    .conteudo {
        justify-content: initial;
    }
}
<div>
    <div class="conteudo">
        <div class="card">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
    </div>
</div>

  • 1

    Thank you @hugocsl

  • @Thor no problem my dear

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.