Przeskakiwanie elementu do nowej linijki przez max-height

Question

W jquery tworzę kod html, który wstawia pozycje do rozwijanego menu tyle razy, ile wyniknie z działania usera

function checkBox(i, inputType, inputName, inputID) {
			
	var insertHtml = 
	`<input type="`+inputType+`" name="`+inputName+`" value="`+i+`" class="checkBoxBtn" id="forLabel`+i+`">
	<label class="labelcheckBoxBtn" for="forLabel`+i+`">
		<li class="inline" title="" id="`+inputID+i+`"></li>
	</label>`;

	$(".dropdownList-content").append(insertHtml);
}

Problem w tym, że rozwijane menu ma ustawione maksymalną wysokość i gdy liczba wstawionych pozycji będzie większa niż ustalone 260px to zamiast być tak
[] Nazwa
[] Nazwa

Dostaję:
[]
Nazwa
[]
Nazwa
 

.dropdownList-content {
  text-align: left;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 170px;
}

Mam identyczne rozwijane menu, ale ustalone z góry, a nie dodawane przez jquery i one się tak nie rozjeżdżają. Gdy usunę max-height również jest w porządku. Już kilka razy wracałem do tego problemu i zupełnie nie mogę wymyślić w czym jest problem. 

Answer 1

To wygląda jakby na szerokość (a nie wysokość) Ci się nie mieściło.

Comments

Masz rację. Twoja odpowiedź nakierowała mnie na to, że problemem jest overflow-y. Dodaje scrolla, ale w ramach zdefiniowanej szerokość, przez co zmniejsza ilość miejsca na content.

Nie zauważyłem tego. Da się zrobić tak, aby scrollbar nie zabierał tego miejsca, tylko pojawiał się dodatkowo?

---

Może tak?

.dropdownList-content {
  text-align: left;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 170px;
  white-space: nowrap;
}

 

---

white-space: nowrap już przerobiłem szukając wcześniej rozwiązania i sprawia, że pojawia się tylko pierwsza pozycja w menu.

Na ten moment pozmieniałem proporcje elementów i jakoś to wygląda, ale sposobu na wyrzucenie scrolla na zewnątrz nie znalazłem.

---

Spróbuj  overflow-y: overlay; - choć piszą w necie, że jest zdeprecjonowany.