Overflow-x messes up Overflow-y

I have a chart block with lots of price bars inside of it. Each price bar contains a tooltip component that appears on hover. I need to restrict overflow-x so that price bars do not overflow the chart box but i want to keep overflow-y so that overflowing tooltips are still visible. Here is demo: https://codepen.io/NEOdinok/pen/poQMBBx?editors=1100 If i add overflow-x: hidden into .chart-block__main then tooltip gets hidden as well. overflow-x: hidden; overflow-y: visible also does not work
6 Replies
Wolle
Wolle15mo ago
You could set overflow to the container of the bars, add a container around that and put the tooltip-element there.
NE340R
NE340R15mo ago
I am not sure what you mean. Do i add another container around chart__columns-container ? What is the point of it ? If i set overflow-x: hidden, overflow-y: visible to chart__columns-container then it's the same story as with .chart-block__main and nothing works as needed I tried setting overflow-x: hidden, overflow-y: visible on every single container and it does not work as expected I think the problem is not that simple and it lies in the fact that position: absolute i use on my tooltip overrites overflow behavior somehow
Kevin Powell
Kevin Powell15mo ago
If you set one axis to hidden, the other one will be auto, even if you specity it to be visible. There's no way around that, just how overflow works. It has to create a new formatting context, because of the way overflow hidden works, so we can't have one in one direction and a different one in the other direction.
NE340R
NE340R15mo ago
Same thing happens when i specify one as scroll and the other as visible overflow-x: scroll works overflow-y: visible next to it does not (hides overflown content)
Kevin Powell
Kevin Powell15mo ago
Yup. As soon as you change either from visible, the other, if not defined, will change to auto. You can't define one side and have the other as visible
NE340R
NE340R15mo ago
Thank you
Want results from more Discord servers?
Add your server