Как расположить второе изображение из 3 в центре div с переполнением, скрытым при загрузке

Question

Я делаю карусель, используя vue. js. У меня есть div с скрытым переполнением и 3 изображения. При загрузке они должны занимать 25%, 50% и 25% от деления соответственно. Как я могу расположить их? Сейчас я использую scrollLeft на смонтированном крюке. Но каждый раз, когда страница загружается, она просто прыгает. Можно ли сделать это с помощью простого CSS, без каких-либо скачков?

<div class="flex" style="height:400px;">
  <div class="left" id="left-button" @click="swipeLeft">
    <font-awesome-icon icon="chevron-left" class="silver" />
  </div>
  <div class="flex pt-1 pb-1 lg:px-0 mx-auto relative" ref="titles" id="titles">
    <div v-for="post of posts.value" v-bind:key="post.id" class="relative">
      <BannerPageComponent v-bind:post="post.joke" @moreInfo="showMoreInfo" v-bind:isArticleClicked="activeIndex" v-bind:post_key="post.id" :style="cssVars" />
    </div>
  </div>

  <div class="right" id="right-button" @click="swipeRight">
    <font-awesome-icon icon="chevron-right" class="silver" />
  </div>
</div>

 document.onreadystatechange = () => {
  if (document.readyState == "complete") {
    const content = this.$refs.titles;
    var scrollPixels = this.window_width / 4;
    content.scrollLeft = scrollPixels;
  }
};