I have this page:
<code>:root {
font-size: 1em;
line-height: 1.15;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
justify-content: center;
grid-template-columns: 1fr;
grid-template-areas:
"sidebar"
"main";
}
.sidebar {
background: pink;
grid-area: sidebar;
}
.main {
background: orange;
grid-area: main;
}
.main ul {
display: flex;
list-style: none;
}
.flex-container {
display: flex;
}
.box {
width: 200px;
height: 200px;
}
.box1 {
background: blue;
}
.box2 {
background: green;
}
.box3 {
background: orchid;
}
.box4 {
background: red;
}
@media (min-width: 52em) {
.grid-container {
grid-template-columns: 200px 500px;
grid-template-areas:
"sidebar main";
}
}</code>
<code>:root {
font-size: 1em;
line-height: 1.15;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
justify-content: center;
grid-template-columns: 1fr;
grid-template-areas:
"sidebar"
"main";
}
.sidebar {
background: pink;
grid-area: sidebar;
}
.main {
background: orange;
grid-area: main;
}
.main ul {
display: flex;
list-style: none;
}
.flex-container {
display: flex;
}
.box {
width: 200px;
height: 200px;
}
.box1 {
background: blue;
}
.box2 {
background: green;
}
.box3 {
background: orchid;
}
.box4 {
background: red;
}
@media (min-width: 52em) {
.grid-container {
grid-template-columns: 200px 500px;
grid-template-areas:
"sidebar main";
}
}</code>
:root {
font-size: 1em;
line-height: 1.15;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
justify-content: center;
grid-template-columns: 1fr;
grid-template-areas:
"sidebar"
"main";
}
.sidebar {
background: pink;
grid-area: sidebar;
}
.main {
background: orange;
grid-area: main;
}
.main ul {
display: flex;
list-style: none;
}
.flex-container {
display: flex;
}
.box {
width: 200px;
height: 200px;
}
.box1 {
background: blue;
}
.box2 {
background: green;
}
.box3 {
background: orchid;
}
.box4 {
background: red;
}
@media (min-width: 52em) {
.grid-container {
grid-template-columns: 200px 500px;
grid-template-areas:
"sidebar main";
}
}
<code><!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body>
<div class="grid-container">
<aside class="sidebar">sidebar</aside>
<main class="main">
<div class="flex-container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box2">5</div>
</div>
</main>
</div>
</body>
</html></code>
<code><!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body>
<div class="grid-container">
<aside class="sidebar">sidebar</aside>
<main class="main">
<div class="flex-container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box2">5</div>
</div>
</main>
</div>
</body>
</html></code>
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body>
<div class="grid-container">
<aside class="sidebar">sidebar</aside>
<main class="main">
<div class="flex-container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box2">5</div>
</div>
</main>
</div>
</body>
</html>
In the flex-container
the five elements go beyond the horizontal viewport, that’s because of the 1fr
value set on grid-template-columns
in grid-container
. If I remove the grid-container
the flex items won’t go more than the available viewport in mobile portrait view. I don’t think using flex-wrap
is the proper solution.
I would be grateful for any suggestion