input element with css height: 100% overflow parent div

Question

I try to create a search bar like Google's one. I wrote the following HTML:

<div id="settings-menu">
    <div class="search">
        <div class="search-icon"><i class="fi-xwluhl-magnifying-glass-wide"></i></div>
            <div class="input">
                <input type="text" placeholder="Search" id="settings-search">
            </div>
        <span class="clear interactive"><i class="fi-xwluxl-times-wide"></i></span>
    </div>
</div>

And the following CSS for the input element:

#settings-menu input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 16px;
    background-color: var(--main-bg-color);
    color: var(--main-color);
}

Here is the result:

I don't understand why the input overflows the parents. Here the full code in JSfiddle: https://jsfiddle.net/Imabot/ub4y7w8f/

Any help (and explanations) is welcome!

Answer 1

This is because your box-sizing is set to content box. Setting it to border-box will fix the sizing problem

*, ::before, ::after {
  box-sizing: border-box;
}

This is because by default, an input element has a vertical padding. Box sizing set to content-box adds the padding to the height value. This makes the total height of the element 100% + the padding leading to the overflow. You can read more about box-sizing here.

If you don't want to change the box sizing, you can rely on flexbox to align to align the content correctly:

#settings-menu .search {
  align-items: center;
}

By aligning flex children to the center, the input will not overflow and will be positioned correctly