My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and their sizes do not adjust accordingly, resulting in some buttons being hidden. Using flexbox prevents this overlapping but causes all buttons to dynamically shrink even if not overlapping on the y-axis (the cell itself is 42rem tall).
Problem Illustration:
https://i.sstatic.net/GHJIi.png
The red cell beneath the Monday column should span the full width, which it currently does not.
Question: Is there a way to dynamically alter these widths only when they overlap? If no overlap occurs, the buttons should expand to fill the total width available. One challenge is the potential addition of more events over time, making fixed percentage values unreliable.
Alternatively: Can I determine the exact number of overlaps so JavaScript can readjust widths whenever new items are added (albeit less elegant)?
Check out the codepen for reference: https://codepen.io/samuel-solomon/pen/oNbKeRm?editors=1100 Note: Vertical positioning must be maintained as it relates to a calendar timeline.
.day_Block {
position: relative;
}
.flexbox_Edits {
top: 0;
position: relative;
width: 100%;
height: 42rem;
}
.event_Button {
border-width: 2px;
max-width: 100%;
border-radius: 8px;
border-style: inset solid solid;
align-items: flex-start;
align-self: stretch;
position: relative;
width: 100%;
float: left;
left: 0;
overflow: hidden;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.event_Button_Text {
word-wrap: break-word;
text-align: left;
float: left;
line-height: 1.25rem;
font-family: 'Montserrat';
font-weight: 550;
letter-spacing: 0.06rem;
display: inline-flex;
font-size: 0.8em !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container on_Left from_Top table-responsive">
<table class="calendar mt-5" id="calendar_Table">
<thead class="masthead">
<tr>
<th class="time_Col days"></th>
<th>
<str>Monday</span>
</th>
<th><span>Tuesday</span></th>
<th><span>Wednesday</span></th>
<th><span>Thursday</span></th>
<th><span>Friday</span></th>
</tr>
</thead>
<tbody id="calendar_Body">
<tr id="Time">
<td class="time_Col">
<div class="time_Block">8am</div>
<div class="time_Block">9am</div>
<div class="time_Block">10am</div>
<div class="time_Block">11am</div>
<div class="time_Block">12pm</div>
<div class="time_Block">1pm</div>
<div class="time_Block">2pm</div>
<div class="time_Block">3pm</div>
<div class="time_Block">4pm</div>
<div class="time_Block">5pm</div>
<div class="time_Block">6pm</div>
<div class="time_Block">7pm</div>
<div class="time_Block">8pm</div>
<div class="time_Block">9pm</div>
</td>
<td class="day_Block">
<div class="d-flex flexbox_Edits" id="M">
<button class="btn event_Button_Text event_Button event_Button_CS_2" style="height: 12rem; top: 0rem; background-color: rgb(83, 94, 235);">M8:00 - 12:00<br>CS 2<br></button>
<button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(254, 44, 84);">M2:00 - 9:00<br>CS 1<br></button>
<button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(19, 202, 145);">M2:00 - 9:00<br>CS 1<br></button>
</div>
</td>
<td class="day_Block">
<div class="d-flex flexbox_Edits" id="T"></div>
</td>
<td class="day_Block">
<div class="d-flex flexbox_Edits" id="W"></div>
</td>
<td class="day_Block">
<div class="d-flex flexbox_Edits" id="R"></div>
</td>
<td class="day_Block">
<div class="d-flex flexbox_Edits" id="F"></div>
</td>
</tr>
</tbody>
</table>
</section>