Flexbox: как предотвратить изменение размера неперекрывающихся кнопок

Question

Я пытаюсь создать приложение-календарь, в котором я добавляю события (кнопки) в календарь (таблицу). Однако я борюсь с коллизиями событий.

Моя структура данных для календаря выглядит следующим образом: это таблица с двумя строками (один заголовок, одно тело). Столбцы первой строки имеют идентификатор дня. Во второй строке указаны события этого дня.

Проблема : Если я добавляю несколько событий в ячейку второй строки и возникает коллизия, то события перекрываются. Я пытался обойти это с помощью flexbox. Это работает с двумя перекрывающимися тегами, но теперь размер неперекрывающихся тегов также изменяется !!! И если нет столкновения событий, я хочу, чтобы тег имел максимальную ширину.

Я помещаю визуальное представление проблемы здесь: См. Фото здесь

Я помещаю Полный (-i sh) код здесь на случай, если я не даю полную информацию ниже: 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

Проблема здесь в том, что все кнопки имеют одинаковые классы и используют один гибкий контейнер. Когда в одной строке находится более одной кнопки, их необходимо идентифицировать по-разному, чтобы применить к ним некоторые уникальные стили.

В этом примере для гибкого контейнера установлено значение 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>

Answer 2

Я тоже новый участник, поэтому я не могу комментировать, чтобы задать еще несколько вопросов о проблеме, надеюсь, это поможет: в классе css "event_Button" у вас есть max-width: 100% и ширина: 100%. Поскольку width: 100% является последним в стиле, max-width не "используется" 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+ */
 }

Мне показалось, что это сработало, но если это не решение, я попробую еще раз.