Working on a vue Project utilizing tailwind for styling, I have a flexbox layout that includes two custom components. The second component is an image that should maintain its size and not shrink or distort when the screen size is reduced. Instead, it should narrow the viewable area horizontally, allowing the user to scroll left and right to see the complete image.
To achieve this, I believe the proper method is to assign fixed dimensions to the outer div, set it to display as a block, and enable horizontal overflow scrolling. The image should have full height and width properties so that when the container is resized, it will overflow as needed.
However, I am encountering an issue where the entire image is shrinking when the container is narrowed.
<div class="flex xl:flex-row flex-col">
<ComponentOne
class="h-128"
></ComponentOne>
<ComponentTwo class="h-full block max-h-[43rem] max-w-[83rem] overflow-x-scroll"></ComponentTwo>
</div>
The code for Component Two is as follows
<template>
<img class="h-full w-full" src="../assets/image.png" />
</template>