CSS – Problema de posicionamiento de grupo de botones

Tengo algunos botones que están vinculados a través de un array observable de knockout, como sigue:

<div class="col-9 btns" data-bind="foreach: groupedDays">
     <div class="btn-group btn-group-outline" data-bind="foreach:$data, css: {active: $data[0].active != false}">
          <button data-bind="css: active == false ? 'btn btn-white btn-xs' : 'btn btn-dark btn-xs', click:$data.click, text:$data.text"></button>
     </div>
</div>

groupedDays contiene 4 elementos: 1. Lunes, 2. Martes, 3. Miércoles, 4. Jueves, Viernes, Sábado y Domingo porque son del mismo color uno al lado del otro.

Mis clases personalizadas son:

.btns {
display: flex;
}

.btn-group-outline {
    display: flex;
    outline-offset: 1.5px;
}
.btn-group-outline.active {
    outline: 2px solid black;
    z-index: 3000;
}
.btn-group-outline > .btn:not(:first-child){
    margin-right: 0;
}

Mis botones agrupados se ven así aquí, pero no puedo pensar cómo hacer que llenen el div con clase col-9 ya que ahora ocupa aproximadamente la mitad del div y debería lucir como aquí con el contorno.