Al usar un display grid
, las columnas renderizan correctamente, al 50% del ancho, con display flex
, hay una pequeña "desviación".
¿Por que se produce esto?
Suelo usar flex
para maquetar dentro de otros elementos, este tipo de cosas no me da mucha confianza.
Nota: probado en Chromium / Firefox.
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding : 0;
margin : 0;
}
.flex-cols {
display : flex;
flex-direction: row;
margin-top : 1rem;
}
.grid-cols {
display: grid;
grid-template-columns: auto auto;
}
.col1 {
background-color: orange;
}
.col2 {
background-color: skyblue;
}
.text-content {
background: grey;
margin: 1rem auto;
width : 80%;
}
</style>
</head>
<body>
<div class="grid-cols">
<div class="col1">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
</div>
</div>
<div class="col2">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
</div>
</div>
</div>
<div class="flex-cols">
<div class="col1">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores
eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae
illum.
</div>
</div>
<div class="col2">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse
tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque
aspernatur eligendi.s
</div>
</div>
</div>
</body>
</html>