KP-C

Kevin Powell - Community•2y ago•

3 replies

Winnie Nguyen

Need helping to figure out the reason: Flexbox

Hi all, I need help with Flexbox.
Here is my slider, I want to set that each of item in the slider takes all of the space of the frame. But i don't know it didn't work like what I expected
And here is my CSS
Please help me with it

.modal-behind_instagramwindow {
background-color: rgba(39, 39, 41, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: auto;
padding: 40px 100px;

}

.instagramwindow {
margin: auto;
display: block;
/* width: 100%;
height: 100%; /

}

.instagram-window__list {
display: flex;
flex-wrap: nowrap;
overflow: auto;
/ width: 100%; */
height: auto;
margin: 0;
border: 2px solid rebeccapurple;

}
.instagram-windowitem {
flex-grow: 1;
}
.instagramwindow-mobile {
display: none;
}
.instagramwindow-fullscreen {
border-radius: 40px;
display: flex;
width: 100%;
max-width: 1200px;
gap: 20px;
background-color: #fff;
border: 5px solid yellow;
}
.instagramwindowitem-img {
width: 50%;
}
.instagramwindowitem-detail {
width: 50%;
}

.instagramwindow-img{
border: 2px solid greenyellow;
max-width: 650px;
height: auto;
}

.instagramwindowitem--header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
}