- Within a flexbox, there are flex items displayed
- Each flex item should appear as a clickable folder with specific text inside
- It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following:
- Constrain each flex item, preferably only by width, for example, max-width: 20% (to ensure it displays nicely on mobile)
- Allow flex items to automatically adjust their width/height to show the entire background image (while maintaining the constraint above)
Unfortunately, I have not been able to find the right combination of parameters to achieve this. Currently, it looks like this:
<div class="container">
<div class="column">
<a href="path1">name1</a>
</div>
<div class="column">
<a href="path2">name2</a>
</div>
</div>
.container {
height: 100vh;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.column {
max-width: 20%;
background-image: url("./ic-folder.png");
background-size: contain;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-around;
The current implementation does not meet the objective - it appears that each item is only large enough to cover the nested <a> and does not properly display the background image.
I suspect that in this case, we may need to hard-code the item's size according to the background image dimensions. However, this would require adjusting the CSS every time the background image changes.
Is there a CSS method to compel the element to expand to cover its background image?