<template>
    <div class="message-div-inner">
      <div class="scrollbar-demo-item message">{{props.message!.message}}</div>
      <div class="fill-div"></div>
    </div>
</template>
  
 <script lang="ts" setup>
  const props = defineProps({
     "message": Object
  })
</script>
  
<style scoped>
    .message-div-inner {
      flex-wrap: wrap;
      display: flex;
      height: auto;
    }
    .message {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scrollbar-demo-item {
      box-shadow: var(--el-box-shadow-light);
      height: 30px;
      display:inline-table;
      word-wrap: break-word;
      word-break: break-all;
      min-width: 10%;
      max-width: 100%;
      border-radius: 4px;
      background: white;
      color: black;
      text-align: left;
      padding: 5px;
    }
    .fill-div {
      display:inline;
      width: auto;
    }
  </style>