0

En una parte de un curso de flex-box que estoy aprendiendo, la persona que lo esta explicando al momento de utilizar flex-direction: column en el código sus artículos no se le desbordan del cuadro gris:

Adjunto imagen

Pero en mi caso, sí se desbordan del cuadro, ¿hay algo que estoy aplicando mal o alguna recomendación que pueda utilizar?. Agredezco sus respuestas.

html {
  padding: 2rem;
  font-family: sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.container {
  /*box-sizing: border-box;*/
  margin: 1rem auto;
  padding: 1rem;
  width: 800px;
  height: 400px;
  background-color: #CCC;
  border: thin solid #FF5700;
  display: flex;
  flex-direction: column;
}

.item {
  /*box-sizing: border-box;*/
  margin: 1rem;
  width: 250px;
  height: 100px;
  text-align: center;
  color: #FFF;
  background-color: #222;
}
<!DOCTYPE html>
<html lang="es">

<meta charset="UTF-8">
<title>Flex Box</title>

<body>
  <h1>Flex Box</h1>
  <section class="container">
    <article class="item">
      <h2>1</h2>
    </article>
    <article class="item">
      <h2>2</h2>
    </article>
    <article class="item">
      <h2>3</h2>
    </article>
    <article class="item">
      <h2>4</h2>
    </article>
    <article class="item">
      <h2>5</h2>
    </article>
  </section>

</body>

</html>

1 respuesta 1

1

Se te desborda porque tienes un height fijo y el contenido de dentro es mas alto que el de tu .container. Eliminando ese height: 800px; ya queda bien.

html{
			padding: 2rem;
			font-family: sans-serif;
			font-size: 16px;
			box-sizing: border-box;
		}

		.container{
			/*box-sizing: border-box;*/
			margin: 1rem auto;
			padding: 1rem;
			width: 800px;

			background-color: #CCC;
			border: thin solid #FF5700;
			  			
			display: flex;
		   			
			flex-direction: column;
		   				
		}

		.item{
			/*box-sizing: border-box;*/
			margin: 1rem;
			width: 250px;
			height: 100px;
			text-align: center;
			color: #FFF;
			background-color: #222;
		}
<!DOCTYPE html>
<html lang="es">

	<meta charset="UTF-8">
	<title>Flex Box</title>
	
<body>
	<h1>Flex Box</h1>
	<section class="container">
		<article class="item">
			<h2>1</h2>
		</article>
		<article class="item">
			<h2>2</h2>
		</article>
		<article class="item">
			<h2>3</h2>
		</article>
		<article class="item">
			<h2>4</h2>
		</article>
		<article class="item">
			<h2>5</h2>
		</article>
	</section>
	
</body>

</html>

1
  • 1
    Como aclaración: los 800px son del width, no del height Commented el 23 may. 2019 a las 12:47

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.