I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space in the calendar from left to right. You can view a snapshot of the current calendar layout below.
Below is an example of how the table cells are structured within my project:
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
}
.table-cell{
display: flex;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event @4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>The issue I am encountering is that the event block continues to expand both left and right instead of solely expanding towards the right. I have experimented with using position: sticky and position: absolute, however, the outcome remains the same.
I would greatly appreciate any guidance on whether it is possible to constrain the expansion direction of a div element or if there are alternative solutions to resolve this challenge. Thank you in advance for any assistance!