Why is

Question

I don't understand why the search box becomes bigger when I add display:flex in my css. Can someone tell me why the search box becomes bigger and how to fix it to a normal height? I want the search bar and the search icon to be stick together also. Thank you for the help!

* {
  font-family: "poppins";
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style2.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
      integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <header>
      <a href="#">My Logo</a>
      <ul class="navigation">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>TV Shows</li></a>
        <a href="#"><li>Movies</li></a>
        <a href="#"><li>Latest</li></a>
        <a href="#"><li>My List</li></a>
      </ul>
      <input type="text" placeholder="Search" />
      <i class="bi bi-search"></i>
    </header>
  </body>
</html>

Itagaki Fumihiko · Accepted Answer

You can specify align-items

Maybe you want flex-start instead of the default stretch.

align-items - CSS: Cascading Style Sheets | MDN

Why is <input type="text" and flex not working well together?

Tags:

html

css

flexbox

Jado Bado

1 Answers

Itagaki Fumihiko

Recent Activity

Donate For Us