Как не выходить за рамки родителя position:absolute; если ширина не известна?

Question

[ortsuev33]

Как не выходить за рамки родителя position:absolute; если ширина не известна?

в рошлый раз не ту картинку загрузил

Answer 1

[Роман]

position:relative родителю, дальше у блока с absolute выставить например top: 20; bottom: 20; left: 20; right: 20; Если это маленький элемент, например кнопка - top: 20; left: 20

Comments

[ortsuev33]

Роман, а в чем смсл этого? я же просто подвину элемент а то что выходило за рамки так и будет выходить

[Роман]

ortsuev33, https://codepen.io/roman94/pen/maMmxQ Теперь как бы мы не меняли высоту родителя, красный блок не будет выезжать за пределы

[ortsuev33]

Роман, аааааааа я догнал !!!!!!Долго доходит )) Спасибо большое!! насколько это уник метод ?кроссбраузерность?

[Роман]

ortsuev33, Во всех браузерах должно корректно отображаться, так как это стандартные свойства в css

[ortsuev33]

Роман, у меня один нюанс который мещает всему этому у меня блок смещен относительно родителя на top:100%;((

[Роман]

ortsuev33, можно указать только left и right и будет подстраиваться по ширине

[lb-web]

ortsuev33, делай этому блоку transformY(-100%). Это типа костыль для выравнивания по оси.

Answer 2

[Anton fon Faust]

не известны размеры какого элемента?

Comments

[ortsuev33]

дочернего элемента,
задача такая есть два вертикальных блока левый и правый оба дочерние элемента display flex а их общий родитель position:abs , в правом контейнере у меня когда контента много выходит за рамки из за white-space nowrap;могу обрезать общий конт position abs ну тогда я не могу вставить для детей свойство after

[Anton fon Faust]

для зеленого max-width: 100%;
jsfiddle.net/anton4ept/t8jmgzas