I have a Box component inside a flex container that is designed to fit the width and height of the screen. When the Box is empty, it behaves as expected, perfectly fitting the screen dimensions. However, when I add a Table component to the Box, which is very large in both height and width, it causes the Box to overflow its height. This makes the Box unusable because I need to scroll all the way to the bottom to reach the horizontal scrollbar.

I’m using React js and @szhsin/react-menu to create a way for the user to create their own formation and edit the formation. If the user right clicks on an object, a menu pops up where they can select from several options. My current issue is that no matter what I try to do, the MenuItem and MenuButton objects will always be overlapped by other PlayerCardMini objects generated by my ‘Formations’ component. I have tried changing the z-index for everything to no avail. Here is an example of the problem:
[Example of problem] (https://i.sstatic.net/jyeCwpxF.png)

In base I have a list of filter chips. This chips are li elements and placed in the ul parent element:

I want to show select option list on hover, but it’s not working:

Closed 3 days ago.

Please read the complete post and check images as well. I tried my best to explain each and everything and what i achieved so far.

I’m encountering an issue where the gap property in CSS isn’t having any effect on my layout. Upon inspection, I noticed that some of my containers have display: block; set, which seems to be preventing gap from working as expected. Specifically, I’m trying to use gap to create spacing between elements within a container.

I am currently developing a web app for blogs using ReactJS. I am currently focusing on styling, and I am encountering an issue with making my background visible inside a div that has a colored background. I have been looking on internet, MDN Web Docs, GeeksForGeeks, and using chatGPT, but nothing, I can’t find the solution.

I had a FE tech test for a company and part of it included some Figma designs to create a paragraph background like these images; key bits are that the last line is cut back, and the outer width is as wide as the longest line. The corners are rounded and the internal bottom right is a reverse radius. If the bottom line is long enough so that the reverse radius collides with the right hand side, then the bottom line background jumps to match the edge. It’s a really nice effect tbh I quite like it.

I am trying to get the ACTIVE pseudo class to work for the li element where the icon images are imported first. But the class only actives itself when clicked but does not stays active. Also, I want it to change the active state when clicked on a different icon of the navigation bar.