Абсолютная ширина элемента позиции усекается при выходе за пределы относительной родительской правой границы

121
15

Эти position: absolute; div, помещенные внутри/вокруг родителя position: relative;, получают высоту/ширину от размера и длины содержащегося текста.


Однако, если один из них выходит за пределы правой границы относительного родителя, его ширина оказывается усеченной.


Как я могу заставить div, который выходит за пределы правой стороны относительного родителя, ведет себя как другие, которые не используют, используя только css? (Должен работать во всех основных браузерах, включая Edge, но не IE)


Вот скрипка, но я также скопирую код + снимок экрана ниже:


example


HTML:


<div id="relative">
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine, too.
</div>
<div id="absolute-problem">
But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???
</div>
</div>

... и стилей. Обратите внимание, что я хочу, чтобы абсолютная ширина div достигла максимума 200 пикселей перед упаковкой. В противном случае ширина должна определяться длиной содержащегося текста:


#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
}

#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}

#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
}


Эта проблема возникла при реализации всплывающей подсказки, которая при использовании разработчиком должна позиционировать себя как WRT offsetParent (или body, если в его ветке DOM не существует предшествующего offsetParent).


Изменить: Как достичь желаемого поведения, используя только css?


Решение должно работать на всех основных браузерах, включая Edge, но не на IE. И просто повторить, width абсолютных divs 'не может быть предсказано, поскольку это должно определяться длиной текстов... единственным исключением является то, что будет max-width (в этом примере это 200px).

спросил(а) 2017-02-01T08:49:00+03:00 3 года, 8 месяцев назад
1
Решение
98

div #absolute-problem имеет левый набор для определенного значения, ширину auto и auto. Согласно это правило в п. 10.3.7 спецификации, это уменьшит ширину div, чтобы соответствовать его содержимому.


'width' и 'right' - 'auto' и 'left' не 'auto', тогда ширина сжимается до соответствия. Затем решите для "права".



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


Установите a width для абсолютного div


Тривиальным решением было бы установить его ширину, чтобы она не уменьшалась.


#absolute-problem {
background-color: red;
left: 80px;
width: 100px;
}

body {
background: #EEE;
}
#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}
#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
width: 100px;
}

<div id="relative">
relative parent
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine, too.
</div>
<div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>

Установите a right для абсолютного div


Это ширина вашего div неизвестна, один из способов обойти это - установить right. Это соответственно регулирует ширину вашего div.


#absolute-problem {
background-color: red;
right: -80px;
left: 80px;
}

body {
background: #EEE;
}
#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}
#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
right: -80px;
}

<div id="relative">
relative parent
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine, too.
</div>
<div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>

Установите width в fit-content/max-content


Другим способом было бы использовать fit-content или max-content (ограниченную совместимость с браузером) для абсолютный div, вместо установки right. Это помогает, если содержимое вашего div не обязательно распространяется на максимальную ширину.


#absolute-problem {
background-color: red;
right: -80px;
width: fit-content;
}

body {
background: #EEE;
}
#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}
#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
width: fit-content;
}

<div id="relative">
relative parent
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine, too.
</div>
<div id="absolute-problem">But not me...</div>
</div>

Установите min-width и max-width


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


#absolute-problem {
background-color: red;
left: 80px;
min-width: 50px;
max-width: 200px;
}

body {
background: #EEE;
}
#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}
#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
min-width: 50px;
max-width: 200px;
}

<div id="relative">
relative parent
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine, too.
</div>
<div id="absolute-problem">But not me...</div>
</div>

ответил(а) 2017-02-01T09:16:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема