2

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!

nick_rinaldi
  • 641
  • 6
  • 17

1 Answers1

2

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?

huan feng
  • 7,307
  • 2
  • 32
  • 56
  • Thanks! I wasn't actually sure whether increasing the width of the button was actually increasing the width of the adjacent text input. With common sense, clearly it was only the height that was being affected. – nick_rinaldi Oct 23 '20 at 09:44