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 work6 Replies
You could set overflow to the container of the bars, add a container around that and put the tooltip-element there.
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 somehowIf 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.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)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
Thank you