Flex items are not shrinking [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am trying to shrink upload-container and img-vector when the screen size is reduced but it seems that the upload container is not shrinking in size. I am new to CSS and I am unable to figure out the problem.
Link to my pen
body,
#main-container,
.upload-container,
.drop-zone {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body,
.upload-container,
.drop-zone {
flex-direction: column;
}
#main-container {
background-color: green;
justify-content:space-around;
width: 100%;
margin: auto;
}
.image-vector {
width: 50vw;
height: 50vh;
flex-shrink: 1;
background: url(https://picsum.photos/200) no-repeat center;
background-size: contain;
}
.upload-container {
background: #17191c;
border-radius: 25px;
flex-shrink: 1;
}

Answer 1

I just added the following code in Responsive Mode. With flex-flow: row wrap; I changed the flex-direction to row and flex-warp to warp break in overflow mode.
#main-container,
.upload-container,
.drop-zone {
flex-flow: row wrap;
}
:root {
--main-bg-color: #212429;
--light-blue: #3a9aed;
--border-color: #3a9aed;
--container-width: 500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: system-ui;
background: var(--main-bg-color);
height: 98vh;
overflow: hidden;
color: white;
}
body,
#main-container,
.upload-container,
.drop-zone {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body,
.upload-container,
.drop-zone {
flex-direction: column;
}
.header-container {
position: absolute;
top: 4%;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: 55px;
}
#main-container {
background-color: green;
/* justify-content:space-around; */
width: 100%;
margin: auto;
}
.footer-container {
position: absolute;
top: 2%;
left: 80%;
}
.image-vector {
width: 50vw;
height: 50vh;
flex-shrink: 1;
background: url(https://picsum.photos/200) no-repeat center;
background-size: contain;
}
.upload-container {
background: #17191c;
border-radius: 25px;
flex-shrink: 1;
}
.drop-zone {
width: var(--container-width);
min-height: 200px;
border: 2px dashed var(--border-color);
border-radius: 10px;
margin: 30px;
transition: 0.2s all ease-in;
}
/* will be added when user drags */
.drop-zone.dragged {
background: var(--main-bg-color);
border-color: #0288d1;
}
.drop-zone input {
display: none;
}
.icon-container {
position: relative;
width: 75px;
height: 100px;
}
.icon-container img {
width: 75px;
position: absolute;
transition: transform 0.25s ease-in-out;
transform-origin: bottom;
}
.icon-container .center {
z-index: 10;
}
.icon-container .right,
.icon-container .left {
filter: grayscale(0.5);
transform: scale(0.9);
}
.dragged .center {
transform: translateY(-5px);
}
.dragged .right {
transform: rotate(10deg) scale(0.9) translateX(20px);
}
.dragged .left {
transform: rotate(-10deg) scale(0.9) translateX(-20px);
}
.title {
font-size: large;
}
#browseBtn {
color: #2196f3;
cursor: pointer;
}
/* uploading progress styles */
.progress-container {
border: 2px solid var(--main-bg-color);
width: var(--container-width);
height: 70px;
border-radius: 10px;
margin-bottom: 25px;
position: relative;
display: none;
}
.progress-container .inner-container {
margin: 10px 15px;
z-index: 2;
position: absolute;
width: calc(100% - 30px);
}
.progress-container .percent-container {
font-size: 14px;
margin: 5px;
opacity: 0.7;
}
.progress-container .bg-progress {
position: absolute;
background: var(--main-bg-color);
width: 100%;
height: 100%;
z-index: 1;
transition: transform 250ms linear;
transform: scaleX(0);
transform-origin: left;
}
.progress-container .progress-bar {
width: 100%;
height: 3px;
border-radius: 2px;
background: #03a9f4;
transition: transform 200ms linear;
transform: scaleX(0);
transform-origin: left;
}
/* sharing container style */
.sharing-container {
margin-bottom: 25px;
width: var(--container-width);
border-radius: 10px;
display: none;
}
.sharing-container p {
text-align: center;
}
.sharing-container .expire {
font-size: 16px;
opacity: 0.7;
margin-top: 0;
}
.sharing-container .input-container {
display: flex;
position: relative;
width: 100%;
margin-bottom: 20px;
}
.sharing-container .input-container input {
width: 100%;
border-radius: 3px;
padding: 10px 15px;
font-size: 20px;
border: 2px dashed var(--border-color);
border-radius: 6px;
background: #17191c;
color: #ffffff;
}
.sharing-container img {
height: 22px;
width: 30px;
position: absolute;
right: 7px;
top: 12px;
cursor: pointer;
background: #17191c;
color: #ffffff;
}
.email-container form {
border: 2px solid var(--border-color);
width: 100%;
padding: 15px;
box-sizing: border-box;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.email-container,
.send-btn-container {
display: flex;
flex-direction: column;
align-items: center;
}
.email-container label {
margin: 5px;
font-size: 18px;
}
.email-container input {
border: none;
border-bottom: 2px solid var(--border-color);
height: 19px;
font-size: 18px;
text-align: center;
}
.email-container input:focus {
outline: none;
}
.email-container .filed {
margin-bottom: 5px;
display: flex;
justify-content: space-between;
width: 400px;
}
.send-btn-container button {
font-size: 18px;
padding: 8px 40px;
margin-top: 15px;
background: #3a9aed;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
}
.toast {
position: absolute;
bottom: 10px;
right: 50%;
transform: translate(50%, 60px);
padding: 10px 20px;
background: var(--light-blue);
color: #fff;
border-radius: 5px;
font-size: 18px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
transition: transform ease-in-out 0.2s;
}
.image-vector {
background: url("https://picsum.photos/200") no-repeat center;
background-size: contain;
height: 50vh;
width: 50vw;
}
.show.toast {
transform: translate(50%, 0);
}
#media screen and (max-width: 900px) {
:root {
--container-width: 320px;
}
body,
#main-container,
.upload-container,
.drop-zone {
flex-flow: row wrap;
}
.email-container .filed {
flex-direction: column;
}
.email-container .filed {
width: 300px;
}
}
<div class="header-container">EZ Sharing</div>
<main id='main-container'>
<section class="upload-container">
<form action="">
<div class="drop-zone">
<div class="icon-container">
<img src="https://picsum.photos/200" draggable="false" class="center" alt="File Icon" />
<img src="https://picsum.photos/200" draggable="false" class="left" alt="File Icon" />
<img src="https://picsum.photos/200" draggable="false" class="right" alt="File Icon" />
</div>
<input type="file" id="fileInput" />
<div class="title">
Drop your Files here or,
<span id="browseBtn">Browse</span>
</div>
</div>
</form>
<div class="progress-container">
<div class="bg-progress"></div>
<div class="inner-container">
<div class="status">Uploading...</div>
<div class="percent-container">
<span class="percentage" id="progressPercent">0 %</span>
</div>
<div class="progress-bar"></div>
</div>
</div>
<div class="sharing-container">
<p class="expire">Link expires in 24 hrs</p>
<div class="input-container">
<input type="text" id="fileURL" readonly />
<img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon" />
</div>
<p class="email-info">Or Send via Email</p>
<div class="email-container">
<form id="emailForm">
<div class="filed">
<label for="fromEmail">Your email</label>
<input type="email" autocomplete="email" required name="from-email" id="fromEmail" />
</div>
<div class="filed">
<label for="toEmail">Receiver's email</label>
<input type="email" required autocomplete="receiver" name="to-email" id="toEmail" />
</div>
<div class="send-btn-container">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
<div class="image-vector"></div>
</main>
<div class="toast">Sample message</div>
<div class="footer-container">
<a href="" target="_blank">
<img border="0" alt="Facebook" src="./github-logo.svg" width="50" height="50" />
</a>
<a href="/" target="_blank">
<img border="0" alt="Facebook" src="./linkedin.svg" width="50" height="50" />
</a>
<a href="">
<img border="0" alt="Facebook" src="./facebook.svg" width="50" height="50" />
</a>
</div>