How to prevent items in the list from spilling into next column?

Question

I have the following html list that I'd like to break into columns:

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <li>Placement on Company Offer Marketplace</li>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

And the class that breaks the list into columns:

.comparison-card-list {
  column-count: 3;
  column-gap: 20px;
}    

If you look into my Codepen, at some widths (like 650px to 830px), few list items (Placement on Company Offer Marketplace, for example), spill over into the next column, rather than wrapping to the next line.

How do I force it to wrap to the next line, rather than spill into the next column?

P.S. Per assist from @Helenesh, this problem is only present in Firefox.

P.P.S. Per Firefox Bugzilla ticket 1525706, the spec states that browsers are allowed to break the content freely in whichever way they please, unless page-break-inside: avoid is specified.

Answer 1

There is a CSS property to solve this issue. Use page-break-inside: avoid; on your li element. Using avoid will keep your columns from 'spilling out'.

.comparison-card-list > li {
  page-break-inside: avoid;
}

From CSS Tricks:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

Answer 2

There is not problem that flexbox can't solve!

Try this:

https://codepen.io/cloudulus/pen/Nowdaa

.comparison-card-list {
  display: flex;
  justify-content: space-between;
}
.comparison-card-list > div
{
  display: flex;
  flex-direction: column;
  flex-basis: 33.3%;
}
.comparison-card-list > div > div
{
  display: list-item;
  list-style-position: inside;
}

<div class="comparison-card-list">
  <div>
    <div>Proferssional Photos</div>
    <div>Pricing Guidance</div>
    <div>divsting Descriptions</div>
    <div>Professional Signage</div>
  </div>
  <div>
    <div>Market Analysis</div>
    <div>MLS divsting</div>
    <div>Open House Coordination and Hosting</div>
    <div>Manage Showings</div>    
  </div>
  <div>
    <div>Placement on Company Offer Marketplace</div>
    <div>Negotiation Assistance, including assessing buyers and their quadivfications</div>
    <div>Requisite property disclosures</div>
  </div>
</div>