Блог

У меня есть родительский div с overflow-y: auto . Он содержит произвольное количество дочерних элементов с текстом. Желаемое поведение заключается в том, чтобы полоса прокрутки появлялась только в том случае, если содержимое переполняется в родительском div, и НЕ появлялась, если содержимое переполняется в любом из дочерних div.

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

В настоящее время полоса прокрутки отображается неправильно, даже если родительский div содержит недостаточно дочерних di> s для переполнения из-за максимальной высоты.

Единственное решение, которое я мог придумать для достижения желаемого поведения, — это установить высоту строки равной 1,5 (минимальная высота, чтобы шрифт не переполнялся) и уменьшить пространство между строками текста с отрицательными полями. Однако мне было интересно, есть ли более приятное решение? Я также попытался дать дочерним подразделениям overflow-y: hidden; но это все равно приводит к тому, что у родителя появляется полоса прокрутки.

 .parent {
   max-height: 100px;
   overflow-y: auto;
}

.child {
   line-height: 1.2; // I cause an annoying scrollbar to appear in the parent
}
 

 <div className="parent">
  <div className="child">Text</div>
  <div className="child">Text</div>
  <div className="child">Text</div>
</div>