如何知道有多少元素重叠并改变它们的宽度

Question

我在一个表格单元格的弹性框中有 3 个按钮。问题是我想调整每个按钮的宽度，以便按钮填充水平宽度 100%（尽可能多）。问题是如果我不使用 flexbox，它们会重叠并且尺寸不会调整（看不到所有按钮）。但是，如果我使用 flexbox，因为它是一个单元格，所有按钮都会动态收缩，即使它们在 y 轴上没有重叠（它是一个 42rem 高度的单元格，见下图）。

这是问题的照片：

在照片中，星期一列下的红色单元格应该是全宽，而不是。

我的问题是：我能否有办法动态更改这些宽度（最大宽度不起作用），只有当它们重叠时。如果它们不重叠，它们应该适合整个宽度。需要注意的是，随着时间的推移，我将动态添加更多事件，所以我只能说将这个按钮设置为 50%，因为很快它可能需要达到 33%。

或者：有没有办法准确地知道有多少重叠，所以我可以在每次添加某些东西时使用 JavaScript 重新调整（不太好）。

这是一个代码笔：https://codepen.io/samuel-solomon/pen/oNbKeRm?editors=1100 注意：我想保留y位置（它是日历的，所以它代表时间）

.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>

Answer 1

我看到您正在使用 display flex 和 top:18rem。我认为最高值设置为在适当的时间位置显示。这个最高值将它们向下移动，但它们的原始位置在第一行。 我认为您可以根据按钮占用的时间段将按钮划分为子部分，并将显示弹性放置在这些部分中。

<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>
</div>
<div class="d-flex flexbox_Edits" id="M">
  <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>

您可以签入您修改后的代码笔。 https://codepen.io/rohinikumar4073/pen/MWKNXzP?editors=1100