I’m working on a web layout where I need to display a series of steps connected by a line. I’ve set up a flexbox layout with spheres representing each step and a line connecting them. However, there’s too much space horizontally between the line and the spheres, while I want to bring the line closer to the spheres. Ideally it should be only a few pixels between them.

The flex layout will start with three columns. When the window becomes smaller, we will have a two-column layout. The first column will be on its own row, and the middle/right will share the space on the second row. When the window is resized to even smaller width, then the left column will take one top row, middle takes the middle row and the left takes the third row. This has been implemented in the code. The pictures are attached for reference.

I have a parent flexbox of constrained width (in this example, 500px) with some content, including a child flexbox. I need some flexbox children (ones assigned flex-fill in the snippet) to fill all available space, but not grow beyond the width allowed by the parent. So the parent element should never be wider than 500px, regardless of any content nested inside.