CSS3 Multi-Column Layout Children Margin Bug

Not reproducible Issue #231262

Details

Created
May 20, 2014
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

Rephttp://jsfiddle.net/6cVqZ/12/](http://jsfiddle.net/6cVqZ/12/)[http://jsfiddle.net/6cVqZ/12/](http://jsfiddle.net/6cVqZ/12/)

 

Expected: The LI’s should not be clipped when being moved to the next column

Actual: Chrome and IE clip the content and put the remaining pieces of the element on the next column

 

 

URL:

Repro Steps:

==============

Set up this HTML structure:

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

Give the ul "column-count:2";

Expected Results:

==============

Should begin all columns with children at same height.

Actual Results:

==============

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Greg W.”

      Changed Status to “Confirmed”

      Changed Steps to Reproduce

      Changed Assigned To from “Greg W.” to “IE F.”

      Changed Status from “Confirmed” to “Not reproducible”

    • You need to add

      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;

      to your li class

      Search online for ‘break-inside’ for more detailed instructions

    You need to sign in to your Microsoft account to add a comment.

    Sign in