Flexbox:如何防止不重叠的按钮调整大小

Question

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

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

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

我将问题的可视化显示在此处：请参阅此处的照片

我将完整(-ish(代码放在此处，以防我没有提供以下完整信息：https://codepen.io/samuel-solomon/pen/oNbKeRm

这是我的碰撞问题：

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

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

Answer 1

我也是一个新的贡献者，所以我不能评论再问几个关于这个问题的问题，希望这会有所帮助：关于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+ */
}

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

Answer 2

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

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

.day_Block {
position: relative;
}
.flexbox_Edits {
top: 0;
position: relative;
width: 100%;
height: 42rem;
flex-wrap: wrap
}
.event_Button {
border-width: 2px;
border-radius: 8px;
border-style: inset solid solid;
align-items: flex-start;
align-self: stretch;
position: relative;
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+ */
flex: 1 0 100%;
}
.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;
}
.two-events {
flex: 1 0 50%;
}
.three-events {
flex: 1 0 33.33%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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 two-events" 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 two-events" style="height: 21rem; top: 18rem; background-color: rgb(19, 202, 145);">M2:00 - 9:00<br>CS 1<br></button>
<button class="btn event_Button_Text event_Button event_Button_CS_1 three-events" style="height: 21rem; top: 36rem; background-color: rgb(254, 34, 84);">M2:00 - 9:00<br>CS 1<br></button>
<button class="btn event_Button_Text event_Button event_Button_CS_1 three-events" style="height: 21rem; top: 36rem; background-color: rgb(19, 102, 145);">M2:00 - 9:00<br>CS 1<br></button>
<button class="btn event_Button_Text event_Button event_Button_CS_1 three-events" style="height: 21rem; top: 36rem; background-color: rgb(19, 02, 145);">M2:00 - 9:00<br>CS 1<br></button>
</div>
</td>