CODEWITHSUNDEEP
htmlcss
nick_rinaldi
nick_rinaldi

Reputation: 707

How come when I edit the size an input element, the adjacent element's size also increases?

So I have two input elements nested inside a div, a text input and a button.

However, when I increase the width and height of the button, it also increases the size of the adjacent text input. I'd like to learn why this is.

I am theorizing it's because both are located inside the nested div, and are being affected by the div's styling. Below is my HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">

    <title>Nick's Todo List</title>
</head>

<body>
    <h1 class="main-header">Nick's Todo List</h1>
    <div class="input-container">
        <input id="input-box" type="text">
        <input id="add-btn" type="button">
    </div>

    <script src="./app.js"></script>
</body>

</html>

Below is my CSS

h1 {
    text-align: center;
}

.input-container {
    display: flex;
    justify-content: center;
}

#add-btn {
    width: 4.5em;
    height: 4.5em;
}

Thanks!

Upvotes: 2

Views: 53

Answers (1)

huan feng
huan feng

Reputation: 8623

Are you sure when you increase the width, it also increases the width of the adjacent text input? Actually the input width should not be affected.

For height, you're encountering the flex equal height columns feature.

An initial setting of a flex container is align-items: stretch.

To override this default setting, add align-items: flex-start to the container.

There is an excellent thread talking about the equal height things:

How to disable equal height columns in Flexbox?

Upvotes: 2

Related Questions