Расположите вычисляемый элемент под элементом flexbox

Question

Мне не хватает советов, касающихся следующей проблемы.

Я хочу расположить несколько элементов внутри flexbox, поскольку функция должна адаптироваться к ее окружению. Ниже одного из этих элементов я хочу расположить вычисляемый элемент, который будет использовать размер элемента над ним. По сути, он имеет фиксированный (но рассчитанный) размер.

Я попытался решить проблему, поместив вычисляемый элемент во flexbox, но это разрушает общее поведение.

Предполагается, что выглядит примерно так:

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

желаемый макет - ссылка, так как мне не разрешено публиковать изображения

В прикрепленном примере jsfiddle пример задача Я использую элемент ввода в сочетании с двумя метками и вычисленным прямоугольником для описания поведения. Думайте о прямоугольнике как о типичном c примере проблемы.

Изменение размера окна с точки зрения увеличения окна работает как шарм. Проблемы возникают при уменьшении размера.

Flex может только уменьшить размер элементов с нефиксированным размером, таких как элемент ввода. Мой вычисленный прямоугольник имеет фиксированный размер. Таким образом, этот размер предотвращает любое сжатие контейнера ввода + прямоугольника.

Идея 1 : сделать вычисляемый элемент немного меньшим, чем соответствующий ввод, чтобы сам контейнер мог сжиматься, так как есть место. Ввод будет уменьшаться, и, следовательно, рассчитанный прямоугольник также будет уменьшаться. См. jsfiddle с меньшим прямоугольником

Это работает в некоторой степени. Если при изменении размера окна мышь движется достаточно медленно / изменения размера происходят медленно, все в порядке. Как только усадка происходит слишком быстро, чтобы рендеринг продолжался, проблема, как описано выше, возникает снова.

Идея 2: Игнорируйте вычисленный элемент, позиционируя его абсолютно. Смотрите здесь: jsfiddle с относительным и абсолютным позиционированием

Я определил, что внешний элемент должен быть позиционирован относительно, а внутренний (вычисленный элемент с / "постоянной" шириной) должен быть позиционирован абсолютно. При этом элемент будет взят из потока, и все работает нормально. Почти . Поскольку теперь прямоугольник игнорируется, оставшийся макет также нарушается. Это неприемлемо из-за использования этой функции в качестве компонента в более широком контексте. В этом примере последний ярлык расположен слишком высоко, так как div не будет учитывать прямоугольник.

Теперь у меня вопрос, есть ли у вас дополнительные советы. Если это вообще возможно, я хочу избежать каких-либо вычислений в javascript и решить проблему, используя css связанные параметры. (В противном случае использование дополнительной информации getBoundingClientRect() - такой как позиция x - могло бы быть в некотором роде опцией (?) -> таким образом, я мог бы полностью удалить прямоугольник из flexbox и просто расположить его «вручную» в желаемая должность).

Я рад любым дальнейшим идеям.

Answer 1

Для людей, у которых может быть похожая проблема, есть другой подход, который я предложил при попытке адаптировать решение James.

См. Этот jfiddle: jsfiddle с использованием переполнения и минимальной ширины

Что я изменил в своем первом решении: проблема с усадкой - это проблема с курицей и яйцом: гибкая коробка не может сжаться дальше, чем внутренние элементы, допускающие усадку, но тогда мой вычисляемый элемент сжимается, только если другой элемент сжимается что, в свою очередь, предотвращается невозможностью сжатия самого flexbox, что возвращает нас к началу.

Так что в моем вопросе я попытался заставить flexbox игнорировать элемент, позиционируя его абсолютно - что портит общий макет.

Решение, которое я придумал для того, чтобы позволить усадку: сделать так, чтобы некоторые элементы могли переполнять flexbox и обеспечить min-width, отличный от auto.

Таким образом, я позволяю вычисляемому элементу overflow flexbox (что делает flexbox своего рода игно пункт). Обратите внимание, что вы также хотите настроить минимальную ширину определенных элементов.

Итак, в конце я представил второй flexbox, который инкапсулирует вычисляемый элемент. И этот элемент, и элементы внутри него допускают как переполнение, так и усадку. (Можно было бы немного упростить элементы).

Таким образом, вычисляемый элемент может нарушать / переполнять свои границы, и общая конструкция может уменьшаться. Сжатие приводит к немедленному изменению размера вычисляемого элемента, поэтому временное переполнение немедленно устраняется.

Вы можете сравнить этот подход с идеей Джеймса и решить, какой из них больше подходит вашим проблемам.

Answer 2

Проблема возникает из-за использования ширины ввода someInput для вычисления ширины computed-element-container. Если вы используете вместо этого ширину гибкого элемента, он должен работать. Я обновил ваш jsfiddle , чтобы показать это - я создал второй гибкий контейнер над оригиналом, который имеет те же три элемента. Затем я вычисляю ширину на основе элемента с идентификатором: content-box. Надеюсь, это поможет вам найти решение:

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