0
188
Views¿Hay alguna forma de ocupar verticalmente todo el espacio del contenedor flexbox?
Quiero que el botón de búsqueda ocupe todo el espacio verticalmente. He intentado configurar la altura al 100% del contenedor principal pero no funciona. He intentado configurar la base flexible al 100%/0/auto (no funciona). Mire mi Código a continuación y vea la imagen del btn al lado de la entrada.
Quiero que btn gane la altura igual a la altura de la entrada.
Ver el problema aquí 
Mi html:
<div className="search_subContainer"> <input className="searchCity" type="text" value={value} placeholder="Search city..." onFocus={() => { setFocus(!focus); }} onBlur={() => { setFocus(!focus); }} onChange={handleChange} /> <button className="search_btn"> <IoSearch /> </button> </div>Mi CSS:
.header .search_subContainer { display: flex; align-items: center; align-content: stretch; height: 100%; border: 2px solid brown; border-radius: 5px; } .header .searchCity { width: 17em; height: 100%; padding: 0.3em 0.5em; font-size: 0.9rem; border: none; outline: none; background-color: rgba(255, 255, 255, 0.377); font-family: var(--secondary-font); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .header .searchCity:focus { background-color: rgba(255, 255, 255, 0.719); } .search_btn { width: 3em; flex: 1; height: 100%; background-color: brown; border: none; font-size: 0.9rem; border-top-right-radius: 1px; border-bottom-right-radius: 1px; cursor: pointer; } .search_btn:hover { background-color: cadetblue; }3 answers
Answer question0
Ahí tu vas:
- evite la altura y el ancho explícitos
simple:
body{ display: flex; align-items: center; justify-content: center; height: 100vh } .header{ padding: .5rem 1rem; display: flex; align-items: center; justify-content: space-between; width: 100%; border: 2px solid black; } .search-bar { padding: 10px; border: 1px solid lightgray; margin-left: -5px; } .search-bar::placeholder { color: black; } .submit-btn { background-color: blue; color: white; padding: 11px; font-size: 12px; border-style: none; margin-left: -5px; } <div class="header"> <div> <a href='/'>tanjiro</a> </div> <div> <input type="search" placeholder="Awesome" class="search-bar"> <button type="button" class="submit-btn">Search</button> </div> </div>0
El culpable es causado por align-items: center . Agregar eso a un contenedor flexible con una dirección de row alinea los elementos secundarios flexibles con el centro verticalmente.
Para solucionar esto, elimine esa línea y el botón de búsqueda debe alinearse con el elemento de entrada.
Arreglar
.search_subContainer { display: flex; border: 2px solid brown; border-radius: 5px; } Hacer esto también significa que no es necesario agregar una height y una flex: 1 al contenedor de entrada, al elemento de entrada y al botón en sí.
Asi que
.search_btn { width: 3em; background-color: brown; border: none; font-size: 0.9rem; border-top-right-radius: 1px; border-bottom-right-radius: 1px; cursor: pointer; } .searchCity { width: 17em; padding: 0.3em 0.5em; font-size: 0.9rem; border: none; outline: none; background-color: rgba(255, 255, 255, 0.377); font-family: var(--secondary-font); border-top-left-radius: 5px; border-bottom-left-radius: 5px; }0
Simplemente elimine los elementos de alineación: centro; pues contenedor y contenedor se estiran. Luego puede alinear el ícono dentro del botón usando flex. Es la forma más simple y correcta, en mi humilde opinión.