Botones de grupo flexibles en posición absoluta

Sé que la respuesta parece fácil, pero he buscado de todo en internet y no encuentro nada.

Tengo 5 botones que funcionan con posición relativa. Tengo curiosidad si puedo usar la posición absoluta de alguna manera. Por supuesto, los botones deben ser flexibles, es decir, si la página está estirada, los botones también deben estar estirados (sin consultas de medios). ¡¡¡Muchas gracias!!!.

.flexible {
 display: flex;
 width:100%;
}
#one, #two, #three, #four, #five {
 background: purple;
 color: #fff;
 border: 1px solid #fff;
 top:0px;
 bottom:0px;
 width: 100%;
 height: 50px;
 position:relative;
 vertical-align: middle;
 font-size: 30px;
 text-align: center;
 }
 
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover { 
 background: #9a009a; 
 color: #fff;
}

<center class="flexible">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
</center>

Solución del problema

Sí, puede, pero sigue siendo una solución muy específica para su caso específico. No es una solución genérica.

#one, #two, #three, #four, #five {
 background: purple;
 color: #fff;
 border: 1px solid #fff;
 height: 50px;
 font-size: 30px;
 text-align: center;
 
 position: absolute;
 top: 0;
 width: calc(100%/5); /* 20% */
}
#one {left: calc(0*100%/5)} /* 0% */
#two {left: calc(1*100%/5)} /* 20% */
#three {left: calc(2*100%/5)} /* 40% */
#four {left: calc(3*100%/5)} /* 60% */
#five {left: calc(4*100%/5)} /* 80% */
[id]:hover {
 background: #9a009a;
}

<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>