Our horizontal size is almost working as expected.
We just have to add in a little bit of success to get everything working.
OK, so the case we're going to add is just a little bit of kind of gotchas.
Let me give you kind of a quick overview of what's going wrong right now.
As you can see, this little resize element is getting displayed underneath the code.
Ed, the reason for this is that we can do an inspect on that riser.
So here's the eastern Cizre.
And here is the ED wrapper and then right above Ed repr is react very sizable.
So this is the sizable that is going in the horizontal direction right now inside of there.
We have Ed wrapper and that thing is currently configured to take up one hundred percent of the available
width.
So all the width we have available inside of reactor sizable is going to the ED and that causes our
little resize element right here to essentially pop out underneath it.
So long story short, the ED is taking up too much space.
It is causing the size thing to go underneath to fix us up.
We want to find reactor's sizable.
And we want to apply.
A display of flex to it, which is pretty much going to say, I don't care how much space this thing
wants to use.
Let that little resize thing up here.
Unfortunately, that's not the only change we need to make.
If you start scrolling the thing or resizing, you'll notice that we start to get some kind of weird
behavior where it looks like the preview window is going over the resize.
In addition, the preview window itself is not really expanding to fill up all the available space here.
So it's pretty clear we still have just a little bit of work to do.
Now we understand the problem, we're going to very quickly add in just a little bit of success to solve
all this stuff, I'm going to first begin by going back over to our sizable file inside of our horizontal
case.
I'm going to apply a class name of resize horizontal.
So this is going to allow us to add in some success to select that resize element only in the case when
we are doing a horizontal resize.
Then inside of my sizable access.
I'm going to add in a new rule for resize.
Horizontal.
So in this case, I want to add in a display of flex and a flex direction of Roe.
Next up over inside of our code editor access file.
I'm going to find Ed Rappaport right here.
We're going to update our with rather than being one hundred percent, we're going to update it to be
calc one hundred percent, minus 10 pixels.
This means let the editor take up 100 percent of the space that is available, but leave behind 10 pixels,
which is the width of that resize handle.
So this gives us just exactly as much space as we need to show that little thing.
I'll then staple these files, look back over, do a quick refresh, and now if I start to try to resize
now it looks like it's working a little bit better.
Now, the only remaining problem is that our preview window is not kind of stretching to take up all
that available space.
So to fix that up, I'm going to inspect the iFrame.
Here's my iFrame and remember, we had added in that additional divx of Prevue wrapper right around
it.
So we really want to tell this previa wrapper to try to stretch and take up as much space as possible.
You might think that to do that, we would add in a width of one hundred percent.
But unfortunately, if you do that, it definitely now is taking up a hundred percent.
Now, that thing is going to try to compete for space against the code editor.
You're going to very quickly notice that there's some kind of strange interactions now rather than a
width of one hundred percent.
We want to add in a flex growe of one, which pretty much just means try to expand and take up as much
space as possible.
But don't try to limit other elements or compete against other elements that are inside of this thing.
Now, I know the white box right here is not expanding, but that is because we added this flex grow
to the previous wrapper itself.
If you mouseover preview wrapper, you will see that that thing is expanding to take up all the space
it needs so we can then add in an iFrame width of one 1/2 percent and now that thing is going to expand
and take up as much space as expected.
And I'd say that this looks pretty good.
OK, well, now that we've added this success in directly to the browser, let's go back set files,
an ad in the flexcar to the previous repr in a width of one percent to the iFrame as well.
So I will find my preview on Prevue rapper.
I'm going to add in.
A Fleck's row of one.
And then on the iFrame, I'll add on A with.
Of one hundred percent.
Hey, back over to our browser.
Quick refresh.
And now as I start to try to expand and claps, yep, this is looking pretty good, you will notice
that it looks like the iFrame is sometimes like jumping out.
Yeah, right there, starting to jump out just a little bit.
That is probably related to that extra rule that we added in to for that after element just a little
bit ago.
If you want to do a little bit of debugging on that, go for it.
Otherwise, I'm going to try to do a little bit of debugging on my own.
I wasn't really expecting that to happen.
So I'm going to do a little bit of debugging here and then we'll try to figure out how to solve that
in the next video.