Even though it's a flexbox, the content won't fit to the browser's window size when I change it... So I'm currently rebuilding the Twitter design for practice, and I got a left sidebar, which is completely fixed down to the bottom of the window. However, when I resize my browser horizontally, the fixed element gets covered up and lost at the bottom - I want it to be resized to the browser's size. So here is one pic how it looks in my normal window:

Full sized browser window - bottom username shows up normally

Here is how it looks as soon as I resize the bottom of the window (bottom gets covered up completely):

Browser resized from the bottom - username not visible anymore

And here is the original Twitter page, and how it's supposed to look once the bottom of the browser window gets sized:

Original Twitter layout

The whole sidebar container is a grid, while I made the elements inside of it (including the username box at the bottom) a flexbox. Here the code of my userbox:

.userbox_container {
    display: flex;
    align-items: center;
    font-family: Arial;
    padding-left: 10px;
    padding-bottom: 25px;
    margin-top: 275px;
}

CodePudding user response：

Add this to your stylesheet:

width:100vw;
height:100vh;

But becarefull with adding padding it you add a padding to need to edit the code. For example to width:calc(<padding>*2) in this <padding> means the padding.

CodePudding user response：

add this line to container style

height: 100vh;