поле снизу не работает последнего изгибаемого потомка в нижней части контейнера

Question

У меня есть кнопка, которая касается конца контейнера.Я хочу, чтобы между концом контейнера и кнопкой был зазор.Нижнее поле, которое я положил на кнопку, не работает.Вот код и html

.events{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center; /*center children horizontally*/
    overflow-y: auto;
    justify-content: start;
    background: grey;
}

.show-event-form {
    margin-top: 20px;
/**this margin bottom is not making space at the end of the container***/
    margin-bottom: 10px;
}

.event-container{
    background: linear-gradient(to bottom left, #f2fcef, #eff7f1);
    border-left:none;
    display: flex;
    width:433px;
    height: 425px;
    border: 2px solid black;
    overflow:hidden;
    overflow-y: auto
}


.container {
    display: flex;
    flex-direction: row;
    margin: 40px auto;
    padding: 20px;
    align-items: stretch;
    justify-content: center;
}
 <div class='container'>
   <div class='event-container'>
       <div class='events visible'>
          <button class='show-event-form rotate'>Add new event</button>
        </div>
    </div>
 </div>

Вот кодекс проекта https://codepen.io/icewizard/pen/ZmJByP.Если вы нажмете на розовую цифру 6, которая является датой завтра, вы увидите текст события, и если вы прокрутите вниз, кнопка будет в нижней части div без заполнения.Как мне это исправить?

Answer 1

Можете ли вы попробовать это, пожалуйста?

.show-event-form {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px;
  flex-shrink: 0;
}