I am seeking guidance on a specific issue I am facing.
My goal is to arrange multiple elements inside a flexbox in such a way that they can adapt to their environment. Underneath one of these items, I want to place a calculated element whose size will depend on the element above it - essentially having a fixed (yet calculated) size.
I attempted to address this problem by placing the calculated element inside the flexbox, but this disrupted the overall behavior.
The desired layout should resemble something like this:
<Label without shrink> <input element, can grow> <Label without shrink>
<some rectangle, size based on calculation>
View the desired layout here as an image link
In the provided example on JSFiddle, I have utilized an input element along with two labels and a computed rectangle to illustrate the issue. Consider the rectangle as a generic representation of the problem.
Resize operations enlarging the window work smoothly. However, issues arise when reducing the window size.
Flex can only reduce the size of elements with variable sizes, such as the input element. The fixed size of my computed rectangle prevents the container from shrinking.
Idea 1: Adjust the size of the calculated item slightly smaller than the related input element so there is room for the container to shrink. This allows both the input and the rectangle to resize accordingly. Click here to see JSFiddle with a smaller rectangle.
While this solution works to some extent, rapid resizing may cause the rendering to fail to keep up leading to the previously described issue.
Idea 2: Ignore the calculated element and position it absolutely. Check out this implementation: JSFiddle with relative and absolute positioning.
I set the outer element to be relatively positioned and the inner (containing the calculated element with constant width) to be absolutely positioned. Although this approach removes the rectangle from the flow allowing things to function properly, the rest of the layout gets disrupted. This is problematic since this feature is intended to be used within a larger context. In the provided example, the last label is misplaced due to the div not considering the rectangle.
Now, I seek further advice. Ideally, I would prefer a CSS-based solution without relying on JavaScript calculations. Alternatively, leveraging more information from getBoundingClientRect() like the X position could potentially resolve the issue (?) - enabling me to remove the rectangle completely from the flexbox and manually position it at the desired location.
I appreciate any additional insights or ideas you may have.