У меня есть абсолютно позиционированный элемент, прикрепленный к телу страницы.У него нет ограничений по высоте или ширине.У меня есть дочерний элемент абсолютного элемента, который содержит список, и его высота ограничена по оси Y.Этот список может быть переменной по длине и ширине, поэтому я бы предпочел не использовать жестко заданные отступы или поля, а также «overflow-y: scroll», потому что полоса прокрутки будет отображаться, даже когда она не нужна.
<style>
.the-absolute {
display: block;
position: absolute;
}
.the-list {
border: 1px solid blue;
display: flex;
flex-direction: column;
max-height: 100px; /* arbitrary limit for example */
overflow-y: auto;
white-space: nowrap;
}
</style>
<body>
<div class="the-absolute">
<div class="the-list">
<div>Title</div>
<div>Year</div>
<div>Studio</div>
<div>Worldwide</div>
<div>Domestic</div>
<div>Budget</div>
<div>Title</div>
<div>Year</div>
<div>Studio</div>
<div>Worldwide</div>
<div>Domestic</div>
<div>Budget</div>
</div>
</div>
</body>
Я ожидаю, что ширина дочернего элемента расширит ширину родительского элемента при размещении полосы прокрутки.Вместо этого содержимое самых длинных элементов списка перекрывается полосой прокрутки справа.
Это работает, как я и ожидал, в Chrome, но, похоже, не очень хорошо работает в IE11 (удивительно!), Firefox или Safari.
Я немного озадачен здесь и был бы признателен за лучшее понимание того, как абсолютное позиционирование влияет на дочерние элементы элемента, и если есть способ, которым я могу иметь динамический режим (то есть без жестко установленных полей, ширины и т. Д.)список, который будет прокручиваться, если он достигает определенного порога, не перекрывая содержимое.
Я пробовал несколько итераций и обтекание элементов, но что-то об абсолютном позиционировании вызывает это.Я могу взломать его с помощью JS, но предпочел бы чисто CSS-решение.Я просто предполагаю, что есть некоторые детали, которые мне не хватает, или мне не хватает правильной комбинации ключевых слов, чтобы найти решение через google / stackoverflow.
Вся помощь приветствуется!