How to stretch an element so to remove its scrollbar?

[bendqh1]

I want to vertically stretch an element, so to remove its y-axis scrollbar.

I have tried this:

height: 100% !important;
overflow: visible !important;

It didn’t help.

What else can be tried, perhaps with JavaScript instead?

I don’t care how long the element will appear to the user, I just want to spare the user the need to scroll down in it

[SamA74]

I think we need a bit more context to your problem.
Any block element by default will stretch vertically to contain its content. If it’s not doing that, it’s because you already did something to stop it doing that. Of course it it is taller than the screen, you will get a scroll bar.
FYI using height: 100% is something that will only work if the parent has a fixed height, or every parent right back to the root has 100% height set.

[bendqh1]

I don’t have a problem with the browser window itself containing a scrollbar, rather, with the element itself containing a scrollbar.

Here is the box CSS I gave to this (form) element:

display: flex;
flex-direction: column;
padding: 25px;

[SamA74]

We will need to see more.

@SamA74

Any block element by default will stretch vertically to contain its content. If it’s not doing that, it’s because you already did something to stop it doing that

I’m not seeing anything in what you have shown that would cause a scroll bar.
It is likely to be a fixed or limited height. Use the browser’s Inspect tools to try and identify the cause.

[PaulOB]

@bendqh1

I don’t have a problem with the browser window itself containing a scrollbar, rather, with the element itself containing a scrollbar.

Then you need to ensure that the element in question does not have a set height and then the viewport scrollbar will work.

If you are talking about an iframe still then you can set the iframe to the width and height of the viewport (assuming no other content) and the iframe will scroll as though it was a native window.

The demo may look a little confusing as its a codepen iframe inside a normal codepen.

[Archibald]

@bendqh1

I have tried this:

height: 100% !important;
overflow: visible !important;

If you are still taking about iframes, I think CSS overflow property does not work with iframes.

[PaulOB]

@Archibald

I think CSS overflow property does not work with iframes

Yes the scrolling attribute was deprecated and an iframe will scroll if its content does not fit within its height. The overflow:auto in my example was unnecessary.