Round background color on Flexbox cells - html

Question

I'm new-ish to Flexbox and trying to build a responsive table-based calendar with round background colors on certain cells. The problem I'm encountering is that since each cell's width is dynamic and on wider (most) screen sizes, the backgrounds are ovals, not circles. How can I set them as circles without disturbing the current layout or using fixed sizes?
As a bonus, I'd also like to be able to dynamically align the date/year with the far-left column.
CSS:
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
background-color: grey;
}
Markup:
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/rWbjYZ.
Thanks!

Answer 1

Added a pseudo element and add some styling to it.
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
position: relative;
}
div.table-cell.event-on::before {
content: '';
width: 25px;
height: 25px;
background-color: grey;
position: absolute;
z-index: -9;
left: 10px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 13px;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>

Answer 2

Used a <span> and ...
<s> for past days
<i> for event
<b> for important event
Changed .table-cell flex-flow to column nowrap and added align-items:center
CODEPEN