Skip to main content
etiquetas editadas
Enlace
user128299
user128299
Reetiquetado de la publicación y cambio en enunciado de la pregunta
Origen Enlace

¿Como ¿Cómo evitar que los divs hijos sobresalgan del div padre?

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 comocó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>

¿Como evitar que los divs hijos sobresalgan del div padre?

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 como 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>

¿Cómo evitar que los divs hijos sobresalgan del div padre?

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>

Corrección de titulo
Origen Enlace
Riaven
  • 3.4k
  • 6
  • 17
  • 32

Tengo el siguiente problema, la letra N se me sale hacia el borde del flexbox-contenedorflexbox-contenedor, y el boxmodelboxmodel de Numero1Numero1, Numero2Numero2 y Numero3Numero3 también se salen del flexbox-contenedorflexbox-contenedor pero solo hacia la parte de abajo, si pueden ejecutenloejecútenlo en modo pantalla grande para que lo puedan visualizar mejor. Alguien¿Alguien sabe como 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>

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 ejecutenlo en modo pantalla grande para que lo puedan visualizar mejor. Alguien sabe como 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>

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 como 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>

Loading
Origen Enlace
Israel
  • 219
  • 2
  • 7
  • 18
Loading