I have a flexbox that works without issue in FF.In Edge, (and I assume Chrome) the flexbox does not resize when the window is resized.I tried every solution I found on the web, no joy.I added all the "-ms-flex", "-moz-box", etc. style properties, did not seem to make a difference. Some other changes moved the images around but, none resized the images when the browser window was resized.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox with Images</title><style> body { display: flex; font-family: Arial, sans-serif; margin: 0; padding: 0; justify-content: center; align-items: center; height: 100%; background-color: #f4f4f4; } .flex-container { display: flex; justify-content: space-around; align-items: center; gap: 20px; padding: 20px; background-color: #ffffff; border: 2px solid #ddd; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .flex-container img { width: 100%; height: auto; flex: 1 1 auto; margin: 0 10px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }</style></head><body><div class="flex-container"><img src="Images/OPC_1.jpg" alt="Image 1"><img src="Images/OPC_2.jpg" alt="Image 2"><img src="Images/OPC_3.jpg" alt="Image 3"></div></body></html>