ARTICLE AD BOX
I’m trying to create a responsive Flexbox layout where each .box: starts at 200px, can shrink down to 150px, wraps to a new line only when 150px is reached, but should not grow on new lines.
Resize the browser window to see how the boxes behave. HTML and CSS snippet below:
body {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 8px solid black;
padding: 20px;
}
.box {
flex: 0 1 200px; /* shrink allowed, grow disabled */
min-width: 150px; /* intended shrink floor */
height: 100px;
background-color: skyblue;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Shrink Before Wrap Issue</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
When flex-grow is disabled (flex-grow: 0), the boxes wrap before reaching their min-width of 150px.
If I enable flex-grow (flex: 1 1 200px), the boxes shrink smoothly down to 150px, but then they grow to fill extra space on the new line, which I don’t want.
So there seems to be a Flexbox behavior where shrink-to-min only works if grow is allowed, but disabling grow causes premature wrapping.
