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; 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 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. 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.
    – BetaM
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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