将计算项定位在 flexbox 元素下方

Question

我正在寻找有关以下问题的一些建议。

我想在 flexbox 中放置几个​​元素，因为该功能应适应其周围环境。 在这些项目之一下方，我想放置一个计算元素，该元素将使用其上方元素的大小。所以本质上它有一个固定（但经过计算）的大小。

我尝试通过将计算出的元素放入弹性框中来解决问题，但这会破坏整体行为。

大概是这样的：

<Label w/o shrink> <input element, can grow>             <Label w/o shrink>
                   <some rectangle, calculated size> 

desired layout - a link since I'm not allowed to post images

在附加的示例jsfiddle example of problem 中，我使用一个输入元素与两个标签和一个计算出的矩形相结合来描述行为。将矩形视为该问题的通用示例。

在放大窗口方面调整窗口大小就像一个魅力。 减小尺寸时会出现问题。

Flex 只能减小不固定大小的元素的大小，例如输入元素。我计算的矩形具有固定大小。所以这个尺寸可以防止输入+矩形容器的任何收缩。

想法1：让计算出来的item比相关输入小一点，这样容器本身就可以缩小，因为有空间。输入将缩小，因此计算出的矩形也会缩小。 见jsfiddle with a smaller rectangle

这在某种程度上有效。如果在调整窗口大小时鼠标移动得足够慢/大小的变化发生得很慢，那么一切都很好。 一旦收缩发生得太快而渲染跟不上，就会再次出现上述问题。

想法2：通过绝对定位来忽略计算的元素。 见这里：jsfiddle with relative and absolute positioning

我定义了要相对定位的外部元素和要绝对定位的内部元素（计算出的带有“恒定”宽度的元素）。 通过这样做，元素将从流程中取出，一切正常。 几乎。 由于现在矩形被忽略，剩余的布局也被破坏了。这是不可接受的，因为在更大的上下文中将此功能用作组件。在示例中，最后一个标签的位置太高了，因为 div 不会考虑矩形。

我现在的问题是您是否有进一步的建议。如果可能的话，我想避免在 javascript 中进行任何计算，并使用与 css 相关的选项来解决问题。 （否则使用getBoundingClientRect() 的更多信息 - 例如 x 位置 - 在某种程度上可能是一个选项（？） -> 这样我可以将矩形完全从 flexbox 中移除，然后将其“手动”定位在所需的位置）。

我很高兴有任何进一步的想法。

Answer 1

此问题似乎是由使用输入 someInput 的宽度来计算 computed-element-container 宽度引起的。如果您使用弹性项目宽度，那么它应该可以工作。 我已经updated your jsfiddle 来展示这一点 - 我在原始容器之上创建了第二个弹性容器，它具有相同的三个项目。然后，我根据具有 id 的元素计算宽度：content-box。希望这将帮助您找到解决方案：

https://jsfiddle.net/jamarmstrong/h9rz1t4b/

Answer 2

对于可能有类似问题的人，这是我在尝试调整 James 解决方案时提出的另一种方法。

查看这个 jfiddle：jsfiddle using overflow and min-width

我对第一个解决方案的更改： 收缩的问题是一些先有鸡还是先有蛋的问题：flexbox 的收缩不能超过内部元素允许收缩的范围，但是我的计算元素只有在另一个元素收缩时才会收缩，而这反过来又被 flexbox 本身无法阻止收缩，这让我们回到了起点。

所以在我的问题中，我试图通过绝对定位来让 flexbox 忽略该元素 - 这会扰乱整体布局。

为了允许收缩，我想出了一个解决方案：让一些元素能够溢出弹性框，并允许 min-width 与 auto 不同。

这样，我允许计算元素overflow flexbox（这使得 flexbox 有点忽略该项目）。请注意，您还想调整某些元素的最小宽度。

所以最后我介绍了第二个 flexbox，它封装了计算元素。这个元素以及里面的项目都允许溢出和收缩。 （也许可以稍微简化一下元素）。

因此，计算元素可能会突破/溢出其边界，并且整体构造可能会缩小。收缩会导致计算元素立即调整大小 - 因此临时溢出会立即得到修复。

您可以将这种方法与 James 的想法进行比较，然后决定哪种方法更适合您的问题。