I have been working on designing a simplistic calendar that displays two weeks with time blocks. While I have created a template for it, I am encountering an issue where the text in the time blocks is overflowing outside their container.
https://i.sstatic.net/G4YMl.png
Here is the HTML code:
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700" />
<link rel="stylesheet" href="test.css">
</head>
<body>
<div style="width: 80%; margin:auto;">
<div id="react-calendar">
...
</div>
</div>
</body>
</html>
And this is the CSS styling used:
.calendar-container{
flex-wrap: nowrap;
display: flex;
flex-direction: row;
overflow-x: auto;
}
.calendar-day{
background-color: #222;
border-radius: 4%;
}
...
If anyone has any suggestions on how to improve the design or fix the text overflow issue, I would greatly appreciate it!