In a vue Project using tailwind for css, i have a flexbox layout with two custom components. The second one is am image that should not shrink or squeeze, but narrow down the viewable area left/right when reducing screen size. Then, the user should be able to scroll the overflow left and right.

The correct approach to my understanding is providing fixed dimensions to the outer div, setting it to block and overflow x scroll. The image has full height and width. When the container is narrowed, it should overflow.

What happens is that the image just shrinks down as a whole for some reason.

  <div >
    <ComponentOne
      
    ></ComponentOne>
    <ComponentTwo ></ComponentTwo>
  </div>

The Component Two looks like this

<template>
  <img  src="../assets/image.png" />
</template>

CodePudding user response：

What you're trying to achieve implies having a wrapper element and a content element. You can't achieve overflow (and scroll) if they're one and the same element.

In more detail, if <ComponentTwo />'s template two looks like this:

<template>
  <img  src="../assets/image.png" />
</template>

then

<ComponentTwo ></ComponentTwo>

effectively renders:

<img  src="../assets/image.png" />

because <ComponentTwo />, wherever is used, will get replaced with the exact contents of its template. In other words, <ComponentTwo />'s classes will get mapped on its root element, which is the <img> element.

You probably want to change its template to:

<template>
  <div>
    <img  src="..." />
  </div>
</template>

Or simply wrap <ComponentTwo /> into a div, bearing the overflow classes you want on it.

Additional notes:

• you might want to give the <img> classes of w-auto and h-auto
• you might want to use .overflow-x-auto instead of .overflow-x-scroll
• always pay close attention to the output (e.g: the resulting DOM elements).