Gente ayuda por favor. Tengo entendido que cuando uso box-sizing: border-box el contenedor va a respetar el Width y no va a exceder esa d...

Carlos Andrés Cabra Bernal

Pregunta

student•hace 4 años

Gente ayuda por favor.

Tengo entendido que cuando uso box-sizing: border-box el contenedor va a respetar el Width y no va a exceder esa dimension. Pero cuando lo ejecuto en pantalla me sigue generando un scroll horizontal y no se por qué

Este es el código

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./mobile.css">
    <link rel="stylesheet" href="./table.css" media="sreen and (min-width: 600px;)">
    <link rel="stylesheet" href="./desktop.css" media="sreen and (min-width: 600px;)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="blue"></div>
        <div class="white"></div>
        <div class="blue_claro"></div>
        <div class="verde"></div>
        <div class="pink"></div>
        <div class="purple"></div>
    </main>   
</body>
</html>

CSS

{

box-sizing: border-box;

margin: 0;

padding: 0;

}

html {

font-size: 62.5%;

}

.container div {

width: 100vw;

height: 150px;

border: 10px solid;

border-radius: 10px;

border-color: white;

}

.blue {

background-color: #154D84;

}

.white{

background-color: gray;

}

.blue_claro {

background-color: #9BDCFB;

}

.verde {

background-color: #D3F788;

}

.pink {

background-color: pink;

}

.purple{

background-color: purple;

}

Christopher Andrés Guano Valencia

student•hace 4 años

Es porque en

.container div

estas agregando un

 width: 100vw

, esto quiere decir que es el 100% de la anchura de pantalla. Con

widht: 100%

estas diciendo, que tome el 100% de la anchura disponible del padre directo.

Lo puedes ver mejor aqui: codi.link

Omar Daniel Centeno

student•hace 4 años

Hola

A lo mejor es por el grosor de la línea del borde que estás agregando. Puedes modificarlo y verificar.

Gente ayuda por favor. Tengo entendido que cuando uso box-sizing: border-box el contenedor va a respetar el Width y no va a exceder esa d...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]