<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - When centering horizontally, li's get cut off"
href="https://bugs.webkit.org/show_bug.cgi?id=151040">151040</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>When centering horizontally, li's get cut off
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>PC
</td>
</tr>
<tr>
<th>OS</th>
<td>Windows 10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>s6132626@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>I am trying to layout li's using flexbox. I have them set to column, with 3 li's in each column. The problem is when I want the ul centered.
I am centering the ul using align-content: center. When I do that, and have more li's than the page can show (overflowed), the li's at the beginning get cut off. (The ones on the left side get cut off, but the ones on the right side display fine.)
I will not have a specific number of li's, it could range from 4 to 50. So I therefore cannot remove align-content: center, because when I have a small amount of li's, (let's say 4), the results are not what I want.
How can I center the ul without having it get cut off?
<a href="http://jsfiddle.net/c06zq2xg/">http://jsfiddle.net/c06zq2xg/</a>
I posted this on stackoverflow: <a href="http://stackoverflow.com/questions/33590889/when-centering-horizontally-lis-get-cut-off">http://stackoverflow.com/questions/33590889/when-centering-horizontally-lis-get-cut-off</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>