In any case, so that the flexible elements can grow in width, but only in height, when necessary. I like flexbox, but it seems to me painful that the flexible elements in the line grow to the same height, even when the content is not filled, and then display additional elements beyond the page. Ideally, I would like flexible elements to be located in the available space when the previous elements do not have enough content to fill the field and do not leave a lot of space.
Is this my lack of knowledge or is it simply impossible? If this is not possible, you can add the object to updates, etc.
(Sorry, I tried to download the charts to explain, but my reputation is not enough!)
[EDIT. Code added as request. Some style left to demonstrate a space . I want other elements of flexibility to perceive me.]
<!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 site restrictions, but not allowing to publish the diagram did not help.
There are Flex element cells containing text, images, or both. Flex items containing image scale in available space. With high resolution, text fields have the same width and height (square), so the scale of the images is ok (square), and that's all a crusher. However, let's say that viewports are 400 px wide, boxes containing only text become long (say, 200 x 1000 pixels for the argument), and image fields are 200 x 200 pixels (square). The next line is then displayed after the bottom of the flex element text, leaving a large gap (say 800px above) below the image. Other flexible boxes may be inserted into the space after image reduction, but they do not move in the gap. Are these clear people who put the question on hold?