List items being cutted by container with fixed height

Question

I have hours trying to figure out how to avoid this bullet points at the bottom being cutted when the text is too long, the container of the unordered list has a max height of 200px and the list has 3 columns. The list overflows the container, but my question is that if it's possible to automatically arrange only the list items that fit that 200px container and maybe hide the rest, avoiding cutting the text? Here's a little demo: https://jsfiddle.net/djyu7s2w/12/

• I'm a list item

.wrapper { max-height: 200px; overflow: hidden; border: 2px solid red; } .list { column-count: 3; column-gap: '4rem'; margin: 0; } .list-item { text-align: 'left'; margin: 0 0 32px 0; } JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

I don't think what you want to do is possible. You could do one of the following: Set a min-height: 200px on the wrapper so the wrapper grows if the

exceeds 200px Set overflow: scroll; on the wrapper so the wrapper has a scroll bar. Set text-overflow styles on the
• s so that text is limited to one or 2 lines