css - Flexbox overlapping absoluted positioned childrens -

i got problem flexbox containers absolute positioned childrens.

fiddle; if window getting smaller (in width) titles getting smaller, absolutly correct, problem in digits overlapping on other watches. tested bit around z-index, background-color doesn't work.

html:

<div class="stopwatch">     <div class="stopwatch__panel">         <div class="stopwatch__header">             <div class="stopwatch__title">random title 404531</div>         </div>         <div class="stopwatch__body">             <div class="stopwatch__counter">                 <div class="stopwatch__segment stopwatch__segment--five">                     <div class="stopwatch__segmenttopleft"></div>                     <div class="stopwatch__segmenttop"></div>                     <div class="stopwatch__segmenttopright"></div>                     <div class="stopwatch__segmentmiddle">                         <div class="stopwatch__segmentmiddletop"></div>                         <div class="stopwatch__segmentmiddlebottom"></div>                     </div>                     <div class="stopwatch__segmentbottomleft"></div>                     <div class="stopwatch__segmentbottom"></div>                     <div class="stopwatch__segmentbottomright"></div>                 </div>                 <div class="stopwatch__segment stopwatch__segment--five">                     <div class="stopwatch__segmenttopleft"></div>                     <div class="stopwatch__segmenttop"></div>                     <div class="stopwatch__segmenttopright"></div>                     <div class="stopwatch__segmentmiddle">                         <div class="stopwatch__segmentmiddletop"></div>                         <div class="stopwatch__segmentmiddlebottom"></div>                     </div>                     <div class="stopwatch__segmentbottomleft"></div>                     <div class="stopwatch__segmentbottom"></div>                     <div class="stopwatch__segmentbottomright"></div>                 </div>             </div>         </div>     </div>     <div class="stopwatch__panel">         <div class="stopwatch__header">             <div class="stopwatch__title">random title 714895</div>         </div>         <div class="stopwatch__body">             <div class="stopwatch__counter">                 <div class="stopwatch__segment stopwatch__segment--nine">                     <div class="stopwatch__segmenttopleft"></div>                     <div class="stopwatch__segmenttop"></div>                     <div class="stopwatch__segmenttopright"></div>                     <div class="stopwatch__segmentmiddle">                         <div class="stopwatch__segmentmiddletop"></div>                         <div class="stopwatch__segmentmiddlebottom"></div>                     </div>                     <div class="stopwatch__segmentbottomleft"></div>                     <div class="stopwatch__segmentbottom"></div>                     <div class="stopwatch__segmentbottomright"></div>                 </div>             </div>         </div>     </div> </div> 

css:

.stopwatch {     position: fixed;     right: 0;     bottom: 0;     display: flex;     justify-content: flex-end;     align-items: flex-end;     max-width: 100%;     width: 100%; }  .stopwatch__panel {     background-color: #ffffff;     border: 1px solid #dddddd;     display: flex;     flex-flow: column;     min-width: 0; }  .stopwatch__header {     background-color: #f5f5f5;     display: flex;     align-items: center;     order: 1; }  .stopwatch__title {     flex: 1 1 auto;     padding: 5px;     border-left: 1px solid #dddddd;     word-wrap: break-word;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; }  .stopwatch__body {     display: flex;     align-items: stretch; }  .stopwatch__counter {     background-color: #333333;     padding: 15px;     flex-grow: 1;     text-align: center;     color: #ffffff;     display: flex;     align-items: center;     justify-content: center; }  .stopwatch__segment {     position: relative;     float: left;     margin: 6px;     width: 18px;     height: 35px;     transition: 200ms ease-in-out; }  .stopwatch__segment--zero .stopwatch__segmenttopright {     border-right-color: #e6e6e6; } /* [...all numbers 0 nine... (only coloring borders) ] */ .stopwatch__segment--nine .stopwatch__segmentbottom {     border-bottom-color: #e6e6e6; }  .stopwatch__segmenttop {     position: absolute;     left: 1px;     height: 0;     width: 10px;     border-top: 3px solid #424242;     border-left: 3px solid transparent;     border-right: 3px solid transparent;     transition: 200ms ease-in-out; }  .stopwatch__segmenttopright {     position: absolute;     left: 15px;     top: 1px;     height: 10px;     width: 0;     border-right: 3px solid #424242;     border-top: 3px solid transparent;     border-bottom: 3px solid transparent;     transition: 200ms ease-in-out; } /* [... other segments parts ...] */ 

add overflow:hidden; .stopwatch__counter

.stopwatch__counter {     background-color: #333333;     padding: 15px;     flex-grow: 1;     text-align: center;     color: #ffffff;     display: flex;     overflow:hidden;     align-items: center;     justify-content: center; } 

see fiddle: https://jsfiddle.net/grassog/jcgyce3g/2/