After some tweaking, I now have a lineup of boxes styled like this:
Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately.
This is the CSS I implemented:
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
min-width: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
min-width: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.main-container {
width: 100%;
height: 100vh;
gap: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
min-width: 0;
}
.background-rectangle {
transform: translate(49.3315px, -24.31px);
left: 0;
top: 0;
margin-right: 0 !important;
min-width: 0;
}
.box-container {
position: relative;
transform: translate(-49.3315px);
top: 0;
min-width: 0;
}
* { min-width: 0; }However, when the number of boxes exceeds 8 or if the browser window is resized, there isn't enough space to display all the boxes with their fixed widths. In order to make all elements resize accordingly and fit in any screen size, I applied min-width: 0; to all elements, but it didn't seem to make a difference.
I am aware that setting flex-flow: row wrap; can show all the boxes on a single page by wrapping them into rows, but I'm curious if there's a way to reduce the size of all boxes using flexbox so they can be displayed in a single row on the page?
In other words, if the widths of all boxes are slightly reduced, could they all fit on one row? Is this achievable using flexbox?