Html Flexbox：如何防止非重叠按钮调整大小

我正在尝试制作一个日历应用程序，在其中向日历（表）添加事件（按钮）。然而，我正在与事件碰撞作斗争

我的日历数据结构如下：它是一个有两行（一个标题，一个正文）的表。第一行的列具有日期ID。第二行具有当天的事件

问题：如果我将多个事件添加到第二行的单元格中，并且发生冲突，则事件重叠。我试着用flexbox解决这个问题。这适用于两个重叠的标记，但现在非重叠的标记也在调整大小！！！如果没有事件冲突，我希望标记处于最大宽度

我在这里展示了这个问题：

我将完整（-ish）代码放在此处，以防我没有提供以下完整信息：

这是我的碰撞问题：

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

---

我也是一个新的投稿人，所以我不能再就这个问题提出更多的问题，希望这会有所帮助：在css类“event_Button”中，你有一个最大宽度：100%和宽度：100%。宽度：100%是样式的最后一个宽度，那么css不会“使用”最大宽度。另外，我尝试删除float:left，因为已经有一个left:0

.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;
  left: 0px;
  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+ */
 }

---

这似乎对我很有效，但如果不是解决方案，我会再试一次。

我也是一名新的贡献者，因此我无法就这个问题提出更多问题，希望这能有所帮助：在css类“事件按钮”中，您有一个最大宽度：100%和宽度：100%。宽度：100%是样式的最后一个宽度，那么css不会“使用”最大宽度。另外，我尝试删除float:left，因为已经有一个left:0

.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;
  left: 0px;
  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+ */
 }

---

这似乎对我有用，但如果不是解决方案，我会再试一次。

这里的问题是，所有按钮都有相同的类，并且共享一个flex容器。当一行中有多个按钮时，需要对其进行不同的标识，以便在其上应用一些独特的样式

在本例中，flex容器设置为

wrap

，默认情况下按钮为

flex:1 0 100%

属性。当一行中有两个按钮时，它们被赋予

。两个事件
类，其中包含
flex:1 0 50%
属性。类似地，
。三个事件
类包含
flex:1 0 33.33%
属性等


.day\u块{
位置：相对位置；
}
.flexbox_编辑{
排名：0；
位置：相对位置；
宽度：100%；
身高：42雷姆；
柔性包装：包装
}
.事件按钮{
边框宽度：2倍；
边界半径：8px；
边框样式：插入实心；
调整项目：灵活启动；
自我调整：伸展；
位置：相对位置；
浮动：左；
左：0；
溢出：隐藏；
-webkit框大小：边框框；
/*Safari/Chrome，其他网络工具包*/
-moz框大小：边框框；
/*火狐，其他壁虎*/
框大小：边框框；
/*歌剧院/IE 8+*/
弹性：10100%；
}
.事件按钮文本{
单词包装：打断单词；
文本对齐：左对齐；
浮动：左；
线高：1.25雷姆；
字体系列：“蒙特塞拉特”；
字号：550；
字母间距：0.06rem；
显示：内联flex；
字体大小：0.8em！重要；
}
.两项活动{
弹性：1050%；
}
.三项活动{
弹性：1033.33%；
}

M8:00-12:00
CS 2

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

这里的问题是，所有按钮都有相同的类，并且共享一个flex容器。当一行中有多个按钮时，需要对其进行不同的标识，以便在其上应用一些独特的样式

在本例中，flex容器设置为
wrap
，默认情况下按钮为
flex:1 0 100%
属性。当一行中有两个按钮时，它们被赋予
。两个事件
类，其中包含
flex:1 0 50%
属性。类似地，
。三个事件
类包含
flex:1 0 33.33%
属性等


.day\u块{
位置：相对位置；
}
.flexbox_编辑{
排名：0；
位置：相对位置；
宽度：100%；
身高：42雷姆；
柔性包装：包装
}
.事件按钮{
边框宽度：2倍；
边界半径：8px；
边框样式：插入实心；
调整项目：灵活启动；
自我调整：伸展；
位置：相对位置；
浮动：左；
左：0；
溢出：隐藏；
-webkit框大小：边框框；
/*Safari/Chrome，其他网络工具包*/
-moz框大小：边框框；
/*火狐，其他壁虎*/
框大小：边框框；
/*歌剧院/IE 8+*/
弹性：10100%；
}
.事件按钮文本{
单词包装：打断单词；
文本对齐：左对齐；
浮动：左；
线高：1.25雷姆；
字体系列：“蒙特塞拉特”；
字号：550；
字母间距：0.06rem；
显示：内联flex；
字体大小：0.8em！重要；
}
.两项活动{
弹性：1050%；
}
.三项活动{
弹性：1033.33%；
}

M8:00-12:00
CS 2

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

M2:00-9:00
CS 1

我确实试过了，但是没用。事实上，没有一个标记到达终点。谢谢你的尝试！我真的很感激（如果有其他方法，请告诉我）。如果它对你有用，我能看到完整的代码片段吗？我添加了一个完整的代码笔，以防上面的代码片段不够用。对不起，听说没用很抱歉。我想我误解了这个问题，这就是为什么我认为它对我有用的原因。我认为问题在于最大宽度和宽度的问题。希望你做对了。：）我确实试过了，但是没用。事实上，没有一个标记到达终点。谢谢你的尝试！我真的很感激（如果有其他方法，请告诉我）。如果它对您有效，我可以看到完整的代码片段吗？我添加了一个