2

Tengo el siguiente problema, la letra N se me sale hacia el borde del flexbox-contenedor, y el boxmodel de Numero1, Numero2 y Numero3 también se salen del flexbox-contenedor pero solo hacia la parte de abajo, si pueden ejecútenlo en modo pantalla grande para que lo puedan visualizar mejor. ¿Alguien sabe cómo solucionar este problema?

.contenedor-flexbox{
    display: flex; 
    flex-direction: row;
    border: 10px solid black;
    font-size: 50px;
    
}

.elemento-flexbox:nth-child(1){
    background: red;
    color: white;
}

.elemento-flexbox:nth-child(2){
    background-color: yellow;
    color: red;
}

.elemento-flexbox:nth-child(3){
    background-color: gold;
    color: blue;
}
    <div class="contenedor-flexbox">
        <div class="elemento-flexbox">Numero 1</div>
        <div class="elemento-flexbox">Numero 2</div>
        <div class="elemento-flexbox">Numero 3</div>
    </div>

2
  • Simplemente usando en el div padre un css como: box-sizing:border-box; Commented el 3 ene. 2020 a las 5:38
  • Debes agregar la propiedad flex-wrap: wrap en el elemento padre (.contenedor-flexbox) para evitar que suceda Commented el 3 ene. 2020 a las 5:41

5 respuestas 5

3

Debes agregar la propiedad flex-wrap:

La propiedad flex-wrap establecida a wrap en el elemento padre permitirá organizar los elementos de manera que salten a la siguiente línea si no cuenta con suficiente espacio horizontal.

Rellenar los espacios vacíos

Si deseas rellenar los espacios vacíos debes establecer la propiedad flex-growa 1 o auto, dependiendo de lo que se desea hacer.

Importante: para ampliar un poco sobre este tema puedes echar un vistazo a: flex-wrap - CSS | MDN

Vamos a la práctica:

.contenedor-flexbox {
  display: flex;
  
  /* Propiedad eliminada por no ser necesaria:
  flex-direction: row; */
  
  /* Propiedad añadida: */
  flex-wrap: wrap;
  
  border: 10px solid black;
  font-size: 50px;
}

.elemento-flexbox {
  /* PROPIEDADES AÑADIDAS */
  /* Factor de decrecimiento (flex-shrink):
    La propiedad flex-shrink reduce el elemento 
    todo lo posible
  */
  flex-shrink: 1;
  
  /* Factor de crecimiento (flex-grow):
     Rellenan los espacios en blanco disponibles 
     vertical u horizontalmente, según si es horizontal
     o vertical el modo en el que se organizan los 
     elementos (items) */
  flex-grow: 1;
  
  text-align: center;
}
.elemento-flexbox:nth-child(1) {
  background: red;
  color: white;
}
.elemento-flexbox:nth-child(2) {
  background-color: yellow;
  color: red;
}
.elemento-flexbox:nth-child(3) {
  background-color: gold;
  color: blue;
}
<div class="contenedor-flexbox">
  <div class="elemento-flexbox">Numero 1</div>
  <div class="elemento-flexbox">Numero 2</div>
  <div class="elemento-flexbox">Numero 3</div>
</div>

2

Utilizando una propiedad CSS llamada border-box con su valor box-sizing que hace que el ancho se respete y ajuste de acuerdo a su padre.

Se usa como:

.tus-hijos {
  box-sizing:border-box;
}

Como más información sobre esta propiedad CSS te cito lo siguiente:

introducir la descripción de la imagen aquí

Encuentra más información al respecto en las documentaciones oficiales como: https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

0

Lo que puedes hacer es esto:

.contenedor-flexbox{
    display: flex; 
    flex-direction: row;
    border: 10px solid black;
    font-size: 50px;
    
}

.elemento-flexbox {
    padding: 15px;
    width: calc(100%/3);
    text-align: center;
}

.elemento-flexbox:nth-child(1){
    background: red;
    color: white;
}

.elemento-flexbox:nth-child(2){
    background-color: yellow;
    color: red;
}

.elemento-flexbox:nth-child(3){
    background-color: gold;
    color: blue;
}
    <div class="contenedor-flexbox">
        <div class="elemento-flexbox">Numero 1</div>
        <div class="elemento-flexbox">Numero 2</div>
        <div class="elemento-flexbox">Numero 3</div>
    </div>

0

Puntos a mencionar:

  • Colocar un tamaño fijo de fuente sin otro a considerar para medidas pequeñas, hará que cuando reduzcas la pantalla de todos modos se desborde el contenido (considera que lo puedes manejar a través de media queries)
  • A los elementos que tienen la clase elemento-flexbox aplicales la siguiente propiedad:

Ejemplo del código:

  .elemento-flexbox{
    flex: auto;
  }
  • De acuerdo con la Mozilla Developer1 podemos usar flex-auto que esta referido o vinculado al factor de crecimiento que tendrán los elementos flexibles para expandirse y llenar el espacio faltante
  • No hace falta que coloques flex-direction: row; pues por default con flexbox todos los elementos se acomodan sobre el eje horizontal también conocido como main axis , aquí la fuente de donde consulte2

Ejemplo colocando pixeles en la medida de la fuente

    <style>
      .contenedor-flexbox{
        display: flex; 
        border: 10px solid black;
        font-size: 50px;
    }
    
      .elemento-flexbox{
        flex: auto;
      }
    .elemento-flexbox:nth-child(1){
        background: red;
        color: white;
    }
    
    .elemento-flexbox:nth-child(2){
        background-color: yellow;
        color: red;
    }
    
    .elemento-flexbox:nth-child(3){
        background-color: gold;
        color: blue;
    }
    </style>
    <div class="contenedor-flexbox">
      <div class="elemento-flexbox">Numero 1</div>
      <div class="elemento-flexbox">Numero 2</div>
      <div class="elemento-flexbox">Numero 3</div>
    </div>

Ejemplo colocando una unidad de medida vw3

    <style>
      .contenedor-flexbox{
        display: flex; 
        border: 10px solid black;
        font-size: 7vw;
    }
    
      .elemento-flexbox{
        flex: auto;
      }
    .elemento-flexbox:nth-child(1){
        background: red;
        color: white;
    }
    
    .elemento-flexbox:nth-child(2){
        background-color: yellow;
        color: red;
    }
    
    .elemento-flexbox:nth-child(3){
        background-color: gold;
        color: blue;
    }
    </style>
    <div class="contenedor-flexbox">
      <div class="elemento-flexbox">Numero 1</div>
      <div class="elemento-flexbox">Numero 2</div>
      <div class="elemento-flexbox">Numero 3</div>
    </div>

Referencias

2
  • No es necesario que ponga estilos a cada elemento, revisa mi respuesta que con una sola propiedad CSS generaliza el estilo para que sus hijos respeten el ancho de su padre. Commented el 3 ene. 2020 a las 5:43
  • Lo sé @FernandoUrban esa parte ya no la quise mencionar y me quedé en los otros puntos. Buena observación.
    – user128299
    Commented el 3 ene. 2020 a las 7:40
0

solucion--> https://escss.blogspot.com/2015/06/hacking-position-fixed-overflow-hidden.html

resumen: agregar al div padre

Transform: translate(0,0);

/* o alguno de estos */
transform: translate3d(0,0,0);
will-change: transform;*/

y al nieto se agrega

position: fixed

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.