Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in additional items being displayed further down the page. Ideally, I would like the flex items to adjust themselves to available space when preceding items lack sufficient content to fill their box, rather than leaving a large gap.
Could this be due to my lack of knowledge or is it simply not feasible? If it's not feasible, could this feature be added in future updates?
(Apologies for the lack of reputation to upload diagrams to clarify!)
[EDIT. Code added as requested. Some style remains to demonstrate the white space I wish other flex items to occupy.]
<!doctype html>
<html>
<head>
<style>
.content {
font-size: 2em;
width: 100%;
margin: 0px;
padding: 0px;
background-color: coral;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
}
.flex-item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis:40vw;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
It seems my question may be unclear. Let me try to elaborate within the constraints of the platform, as I am unable to post a diagram.
In the Flex item boxes, there are text, images, or a combination of both. Items containing just images scale based on available space. At higher resolutions, text-only boxes have equal width and height (forming a square), allowing images to scale appropriately. However, at smaller viewports like 400px wide, the text-only boxes become elongated (for instance, 200 x 1000px) while image boxes maintain a square size of 200 x 200px. The next line then displays below the bottom of the text in the flex item, creating a sizable gap (around 800px high) under the image. Despite having ample space for additional flex boxes after the compressed image, they do not move into the gap. Is this clear to those who placed the question on hold?