-1

I have a flex container which displays a horizontal scroll bar when the number of flex items exceeds the available viewport width.

This works fine until I add a pseudo element (down caret) to one of the items, causing a vertical scroll bar to appear.

As expected, adding overflow-y: hidden to my container will hide part of my pseudo element. So my question is how can I prevent a vertical scroll bar when trying to independently set the x-axis to 'auto' only?

JS Fiddle example

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
dom_ahdigital
  • 1,651
  • 18
  • 37
  • 1
    Possible duplicate of [CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue](https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue) – Gibin Ealias Mar 07 '18 at 16:09
  • It's a common problem (literally hundreds of similar questions on SO). An absolutely-positioned element, as it is removed from the document flow, will not expand the parent height, but it will trigger an overflow condition. A simple solution would be to set the height of the parent to include the abspos pseudo-element. – Michael Benjamin Mar 07 '18 at 17:29

1 Answers1

0

Then you want add the extra space to avoid Vertical Scroll .

You can achieve this just add extra space on .hud-card this selecter.

.hud-card {
    margin-bottom: 12px;
}
Anzil khaN
  • 1,974
  • 1
  • 19
  • 30