Vue JS how to display inner words in an array vertically

Question

I have an array where the time is saved, the problem is that in the browser these elements are located at the bottom and I need them to look on the sides here is an example

I tried to fix the problem with css but it was a waste of time, then I decided to apply html tags inside the array for example <span> 12:32 </span> <span> AM </span> then specify display: flex for the < li> that is, to get the following construction <li style = "display: flex"> <span> 12:32 </span> <span>AM</span> </li> but as you already guessed it didn't work

Here is the given code in codesandbox

<template>
  <div class="time-container">
    <div class="Container Flipped">
      <div class="Content">
        <ul>
          <li v-for="(item, index) in time" v-bind:key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      time: ["10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "12:00 PM", "12:30 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM", "4:00 PM", "4:30 PM", "5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM", "8:30 PM", "9:00 PM", "9:30 PM", "10:00 PM", "10:30 PM", "11:00 PM", "11:30 PM", "12:00 AM", "12:30 AM", "1:00 AM", "1:30 AM", "2:00 AM", "2:30 AM", "3:00 AM", "3:30 AM", "4:00 AM", "4:30 AM", "5:00 AM", "5:30 AM",
        "6:00 AM", "6:30 AM", "7:00 AM", "7:30 AM", "8:00 AM", "8:30 AM", "9:00 AM", "9:30 AM",],
    }
  }
}
</script>

<style scoped>

@font-face {
  src: url(~@/assets/fonts/FontsForClosePage/Montserrat-Bold.ttf);
  font-family: 'Second-Montserrat-Bold'
}

.Container {
  overflow-y: auto;
}

.Flipped, .Flipped .Content
{
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

.time-container {
  padding: 10px;
  background: #74C8C5;
  overflow-y: auto;
}

ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

li {
  background: #FFFFFF;
  margin-right: 8px;
  border-radius: 7px;
  list-style-type: none;
  padding: 5px 10px 5px 10px;
  font-family: 'Second-Montserrat-Bold';
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #000000;
}
</style>

Answer 1

Just add white-space property to the li selector:

li {
  white-space: no-wrap;
}

Note that when your list size will increase, you will face other problems - Why don't flex items shrink past content size? Also, read more about flexbox and text truncation here.

Answer 2

I tried many solutions this one worked

li {
  min-width:70px; 
}