.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>EDIT: included code snippet for reference
I am attempting to create a horizontal scrolling div, but when I add content images, they get resized and squeezed inside the container like this:
The images are being resized to fit within the container, but I want them to be displayed at their original size with the ability to scroll horizontally.
I tried adding "overflow: scroll" but it didn't work as expected.
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
I thought I understood how to achieve this, but clearly I need some help! Any suggestions would be appreciated.
Thank you