How to make a slide of two columns one static and other scrollable?

[stefaniecg]

Description

The below example shows two slides.
Slide 1: A scrollable container that takes up the entire slide, with a scrollable image.
This works.

My expectation:
Slide 2: I want the full picture on the left side and on the right side the scrollable version.
But this does not work.

How to make a slide of two columns one static and other scrollable?

---
format:  revealjs
---

## slide 1

This works!

::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::

## slide 2

This does not work!

::: {layout-ncol=2}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="50%"}

::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::
:::

[mcanouil]

I'm afraid that's a 100% HTML/CSS question which requires understanding of the structure you are created.
For that, you can use your favourite browser developer/inspect mode to investigate and learn how your slide is structured. You'll be able to see the inheritance of the various elements such as the divs and how they interact/constrain each other.

[stefaniecg]

if you are not gonna help, please don't answer.
Thank you

[cscheid]

@stefaniecg I want to let you know that this isn't an acceptable response here. I want to ask you to please review our code of conduct before further engaging in these forums.

For what it's worth, the original answer is accurate. When you add specific styles such as you've done with style="overflow-y: scroll; height: 500px;" in your example, then you need, by definition, to understand how they work in order to use them. The original answer is giving you the tools to inspect the output of your document to diagnose and resolve issues as necessary.