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

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 >
        <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 ></i>
    </header>
  </body>
</html>

CodePudding user response：

You can specify align-items

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

align-items - CSS: Cascading Style Sheets | MDN

CodePudding user response：

You can wrap input and i tags in a div:

* {
  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 >
        <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>
      <div>
      <input type="text" placeholder="Search" />
      <i ></i>
      </div>
    </header>
  </body>
</html>

CodePudding user response：

the input takes the entire height of the flexbox because of the default strech value for the cross-axis. To prevent that, you need to give the input a specific height such as min-content. Alternativly you can prevent that by adding align-items: flex-start to the flex-container.

Using something else then the default align-items: strech;:

* {
  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;
  align-items: flex-start;
}

<header>
  <a href="#">My Logo</a>
  <ul >
    <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 ></i>
</header>

Giving the input a specific height:

* {
  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;
}

input {
  height: min-content;
}

<header>
  <a href="#">My Logo</a>
  <ul >
    <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 ></i>
</header>

CodePudding user response：

it is happening because by default flex align-items property is set to stretch to avoid this problem you can set a height on the input field or you can change the align-items property value to flex-start.

check https://www.w3schools.com/cssref/css3_pr_align-items.asp

CodePudding user response：

This is happening because , your navigation class is having greater height , and by default , height of input element is the height of the container .

Compiling everything together : There are 3 solution to this which I figured out.

Either you write height of input : min-content;
make .navigation to display flex , which decreases the height of that component .
Add align-items : flex-start or center ;to the header element, which decreases the height of input element .

input{
   height: min-content;
}

.navigation{
   display:flex;
}

header{
   ...other styles of this element 
   align-items:flex-start;
}

You can use any of the above styles to solve your problem .

CodePudding user response：

* {
  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;
}

header .navigation {
  display: flex;
}

header .navigation li {
  margin: 0 .3rem;
}

<!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 >
        <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 ></i>
    </header>
  </body>
</html>