Flexbox überlappende absolut positionierte Kinder

Question

Ich habe ein Problem mit flexbox Behältern mit absolut positionierten Kindern.

FIDDLE; Wenn das Fenster kleiner wird (in der Breite), werden die Titel kleiner, was absolut korrekt ist, das Problem liegt in den Ziffern, die sich über den anderen Uhren überlappen. Ich testete ein bisschen herum mit z-Index, background-color, aber nichts funktioniert.

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: all 200ms ease-in-out; 
} 

.stopwatch__segment--zero .stopwatch__segmentTopRight { 
    border-right-color: #e6e6e6; 
} 
/* [...all numbers from zero to 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: all 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: all 200ms ease-in-out; 
} 
/* [... the other segments parts ...] */ 

Answer 1

hinzufügen 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; } 

sehen diese Geige: https://jsfiddle.net/grassog/jcgyce3g/2/