I've experimented with the width property, flex, flex-basis, and flex-shrink, but so far nothing seems to be working. I can't seem to pinpoint where the mistake lies in the code.
I wanted to include the code snippet here, but it's throwing an error asking for more details. So, I've uploaded the code on CodePen and here is the link:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #444;
}
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practising the flexbox</title>
<link rel="stylesheet" href="practice.css" />
</head>
...
Here is the image of the container: https://i.sstatic.net/eOhKI.png