Making Panels Scrollable with Flexbox
Use Tailwind’s Flexbox utilities to control the sizing and behavior of each panel in our application layout. You’ll see how to make panels scrollable when their contents overflow their container, as well as how to use nested Flexbox panels to achieve Discord’s layout.
Instructor: [0:00] Let's make all these panels scrollable. We'll start with the server selector right here. Back in our app, we can see right now our padding is a little bit bigger. First, let's tweak these padding values. We'll go ahead and bring them all down to padding 3. Now, our servers panel here lines up exactly with Discord.
[0:20] We want to add a few more dummy servers here. We can use a little trick to do this. We'll create a new array of length 40. If we spread that into an empty array, we can map over this just like this. That's an easy way to generate some dummy data.
[0:44] We can use the space-y-2 utility here to add some space in between each one of these servers. Let's grab the index from this map() function right here. We'll drop that just like this so we can have some different data to work with.
[1:02] Now, we see that our servers here are overflowing our application. By default, that's exactly what Flex is going to do. We can come to our parent here and add an overflow-y scroll to make it so that anything that goes beyond the constraints are just going to scroll.
[1:21] Now, we can see that right here, the application is still constrained to the window, but our server list scrolls, just like it does in Discord. That's pretty simple, and that is the basic idea behind making these Flexbox panels scrollable.
[1:38] Let's move on to our channel list here. Over in Discord, the fixed header right here is 48 pixels tall, and then the rest of this channels list is what actually Scrolls. Back in our app, we can see that the header is also 48 pixels, but it just happens to be because of how we're using this padding.
[2:01] Instead, let's remove the vertical padding. We'll give it a fixed height using h12, which is going to give us that 48-pixel height. Now, we want to center the text, so we'll use flex-item-center. Now, our heading is locked in place at 48 pixels no matter what the contents are here.
[2:21] Let's grab this 40-element treatment here and come in our channels panel and basically do the same thing. Here, we'll go ahead and put in our channel. We'll drop the index here so we can see what's going on. Now, you'll see that our Flexbox layout has shrunk our header to make room for all these channels here now that they're taking up all this space.
[2:47] In Flexbox, we can tell it not to shrink the header using the flex-shrink- utility class, and that will always reserve these 48 pixels for our header. That's looking a little bit better, but our channels are still overflowing our layout here.
[3:03] Let's do the same thing we did to our servers, come to the parent and add overflow-y scroll. Now, our channels should be scrollable, just like our servers are over here. We can do the same thing and add a little bit of space so that this matches Discord a little bit better.
[3:25] Once we tell our layout that this div should be scrollable, we can remove this flex-shrink- right here because it's smart enough to know, "Hey, we're already scrolling, so we don't need to take up any more space from this header."
[3:38] I wanted to show you that, in case you have static panels that aren't scrollable, again, it's good to get practice with the different Flexbox utilities so that you can achieve any layout you want. Let's copy the same treatment here over in our main area. We'll make this padding only in the X-direction. We'll give this a fixed height, and we'll make this flex-item-center.
[4:05] We'll go ahead and copy this array treatment. We'll call this message 1, add some lorem ipsum text right here. We'll add a bit of space between each message. Again, we can see the messages list is taking up extra space from the header. As soon as we add overflow-y scroll, the header should get that space right back.
[4:34] This is pretty cool. We have these three independent scrollable panels, and each one is taking up extra space in the system, exactly as we would expect. The scrollable panels get the extra vertical space, and, again, just like from the last video, this main area is taking up the extra horizontal space with our server and channel selectors being a fixed width.