0

Cada vez que en mi header (mi contenedor de los div) pongo display: flex;, en mi input no puedo usar ningún tipo de width, ya sea min, max o el width. De hecho, cuando veo el inspeccionar pagina, se marca en violeta el espacio que queda entre elementos, no entiendo porque no lo ocupa.

El div .contenedor es general, el importante es el .header, ese es el contenedor de mi barra de navegación que intento hacer. Adjunto mi código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.contenedor {
  width: 100%;
  min-width: 100vh;
}

.header {
  display: flex; /*Uso en este contenedor el FLEX*/
  background-color: #ff0000;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  flex-direction: row;
}

.header .centro input {
  min-width: 60%;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
<div class="contenedor">
  <header class="header">
    <div class="start">
      <p>hola</p>
    </div>
    <div class="centro">
      <input type="text" placeholder="Buscar">
    </div>
    <div class="fin">
      <p>Adios</p>
    </div>
  </header>
</div>

4
  • Pues yo lo he probado y me funciona perfectamente. El input me coge el valor 60%. Estás seguro que te está cargando el archivo css?
    – Suso
    Commented el 14 feb. 2023 a las 12:09
  • Sisi, de hecho para asegurarme le asigno siempre background y etc para ver que le afecte. No se porque pasa esto
    – Alan Stone
    Commented el 14 feb. 2023 a las 12:10
  • Ahi volvi a subir mi codigo, si ves en input puse mas cosas, todo eso me lo toma, pero el ancho no me lo modifica, tengo que poner un width o min-width de mas del 100% para que empiece a agrandarse o debo ponerlo en pixeles pero en cantidades de 400px o 600px. Es demasiado. Encima solo lo estira hacia la derecha, no toma espacio en la izquierda
    – Alan Stone
    Commented el 14 feb. 2023 a las 12:20
  • @AlanStone buen día, cuál sería el problema en sí?... Commented el 14 feb. 2023 a las 14:11

3 respuestas 3

0

El hijo directo de "header" es "centro", es este al que se le puede editar el tamaño, al input le debes asignar tamaño 100% para que tenga el tamaño de "centro"

La razón es la siguiente: cuando le das propiedad flex a un elemento, sus hijos pasan a ser todos nodos tipo flex y su tamaño por defecto es 1 1, es decir todos tienen el mismo tamaño (start, centro, fin), el input está dentro de centro por lo que no importa cuanto tamaño le des, siempre estará dentro de los límites de centro por lo que, si bien el tamaño crece, este "no se moverá" porque el padre es el que dicta el lugar en el que se muestra (en este caso: "centro")

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.contenedor {
  width: 100%;
  min-width: 100vh;
}

.header {
  display: flex; /*Uso en este contenedor el FLEX*/
  background-color: #ff0000;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  flex-direction: row;
}

.header .centro {
  min-width: 60%;
}
.centro input {
  width: 100%;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
<div class="contenedor">
  <header class="header">
    <div class="start">
      <p>hola</p>
    </div>
    <div class="centro">
      <input type="text" placeholder="Buscar">
    </div>
    <div class="fin">
      <p>Adios</p>
    </div>
  </header>
</div>

2
  • Ahora me funciono, pero lo que no entiendo, es que estoy haciendo lo que hace uno siguiendo sus pasos, porque queria hacer la barra de youtube como practica, el usa display grid, yo opte por display flex, en tal caso, en lo pone directo en el input y le toma bien, sera porque usa display grid?. Igual antes uno me dijo que lo puso como lo tenia y le funcionaba, no entiendo eso ahora
    – Alan Stone
    Commented el 14 feb. 2023 a las 16:14
  • Fuera de eso, me funciono tu respuesta, darle el ancho al centro y luego al input, muchas gracias <3
    – Alan Stone
    Commented el 14 feb. 2023 a las 16:14
0

El problema es que no tiene una medida de referencia, deberias poner

contenedor{
  width:100vw;
 }

y eso te va a permitir que se te ajuste a un 60%, si le colocas una medida en px tbm te va a permitir cambiarlo

2
  • Recién lo pongo, cambia su tamaño, pero si pongo 60% no cambia nada, lo cambia si pongo 160% o mas inclusive. Fuera de eso, solo agranda su ancho hacia la derecha, no a la izquierda
    – Alan Stone
    Commented el 14 feb. 2023 a las 12:02
  • Tuve que poner 200% para que se agrande bastante pero lo hace solo sobre la derecha, no ocupa el espacio izquierdo. Si pongo altura eso si me lo toma correctamente, se agranda tanto de arriba como de abajo, pero el width no lo toma correctamente.
    – Alan Stone
    Commented el 14 feb. 2023 a las 12:03
0

Para que veas, cargo el código como un fragmento js y me coge el ancho del css.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contenedor{
   width: 100%;
   min-width: 100vh;
}

.header{
    display: flex; /*Uso en este contenedor el FLEX*/
    background-color: #ff0000;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    flex-direction: row;
}

.header .centro input{
    min-width: 60%;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
 <div class="contenedor">
        <header class="header">

            <div class="start"><p>hola</p></div>

            <div class="centro">
                <input type="text" placeholder="Buscar">
            </div>  

            <div class="fin"><p>Adios</p></div>
        </header>
    </div>

A ver si te estás liando con el min-width y el max-width...

2
  • Recien me dieron la respuesta, le di un ancho al .centro y luego al input otro, de todas formas tengo dudas porque alguien lo uso asi, supongo sera porque el usa grid y yo uso flex
    – Alan Stone
    Commented el 14 feb. 2023 a las 16:15
  • Aunque sigo sin entender porque a otros les funciona bien y a mi me anda mal asi
    – Alan Stone
    Commented el 14 feb. 2023 a las 16:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.