Is there anyway to allow flex items to grow in width but only in height when necessary. I love flexbox but find it painful that flex items in a row all grow to the same height even when there is not content to fill them and then display additional items further down the page. Ideally I would like flex items to arrange themselves into available space when previous items don't have sufficient content to fill the box and not leave a big space.
Is this my lack of knowledge or is it just not possible? If it's not possible, could the facility be added in updates etc.
(Sorry. I tried to upload diagrams to explain but my reputation isn't enough!)
[EDIT. Code added as request. Some style left to demonstrate the white space I want to be taken up by the other flex items.]
<!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>Apparently my question is not clear enough! I will try and expand with the sites constraints but not being allowed to post a diagram doesn't help.
There are Flex item boxes containing text, images or both. Flex item boxes containing images scale to the available space.With high resolutions, text only boxes are the same width and height (square) so images scale ok (square) and all is chipper. However at say viewports of 400 px wide, the boxes containing just text, become long (say 200 x 1000px for sake of argument) and the image boxes are 200 x 200px (square). The next line is then display after the bottom of the flex item text leaving a big gap (say 800px high) below the image. Other flex boxes could fit in the space after the shrunk image but they don't move into the gap. Is that clear people who put the question on hold??