title: Ordered list rendered as flexbox doesn't show bullets/decimals (items also rendered as flexbox)
body: <p>I have an ordered list (<code>ol</code>) that has it's <code>display</code> property set to <code>flex</code>. Also the list items are rendered as flexboxes. Doing this results in the bullets (numbers) not being shown anymore.</p>
  
  <p><strong>Is there any way I can get the bullets to show on the <code>ol</code> with classes <code>.questions.questions--likert</code> (in the area where the 40px <code>padding</code> is)?</strong></p>
  
  <p>See <strong>Fiddle</strong> (contains SCSS): <a href="http://jsfiddle.net/3y5t0xpx/3/" rel="noreferrer">http://jsfiddle.net/3y5t0xpx/3/</a></p>
  
  <p><em>HTML &amp; compiled CSS below:</em></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form class="form  form--test" name="frm-identification" action="/" method="post"&gt;
      &lt;fieldset&gt;
          &lt;h2&gt;Identificatie&lt;/h2&gt;
          &lt;p&gt;Gelieve volgende gegevens in te vullen vooraleer de test te starten.&lt;/p&gt;
          &lt;ol class="questions  questions--likert"&gt;
              &lt;li class="question"&gt;
                  &lt;p class="description"&gt;Inventieve ideeen brengen&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-1" value="1" /&gt;&lt;span class="value"&gt;1&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-2" value="2" /&gt;&lt;span class="value"&gt;2&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-3" value="3" /&gt;&lt;span class="value"&gt;3&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-4" value="4" /&gt;&lt;span class="value"&gt;4&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-5" value="5" /&gt;&lt;span class="value"&gt;5&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-6" value="6" /&gt;&lt;span class="value"&gt;6&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label class="input-container  input-container--radio"&gt;&lt;input type="radio" name="rbt-t1q1" id="rbt-t1q1-7" value="7" /&gt;&lt;span class="value"&gt;7&lt;/span&gt;&lt;/label&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Compiled CSS:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic);
  /* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol, ul {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  blockquote:before, blockquote:after {
    content: '';
    content: none;
  }
  
  q:before, q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  html {
    color: #333;
    font: 87.5% 'Open Sans', sans-serif;
  }
  
  body {
    font-size: 1rem;
    line-height: 1.428571429;
  }
  
  h1 {
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  
  h2 {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  
  p {
    margin: 0 0 10px;
  }
  
  ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  ul li, ol li {
    margin: 0 0 0 1.5rem;
    padding: 0;
  }
  
  ol {
    list-style: decimal outside none;
  }
  
  ul {
    list-style: disc outside none;
  }
  
  .form input, .form textarea {
    font-family: 'Open Sans', sans-serif;
    color: #333;
  }
  
  .form dl {
    padding-top: 10px;
  }
  
  .form dl dt, .form dl dd {
    padding: 0 0 10px;
    margin: 0;
  }
  
  .form dl dt {
    font-size: 12px;
    vertical-align: top;
    font-weight: bold;
    padding-bottom: 5px;
  }
  
  .form dl dt .required {
    color: #f00;
  }
  
  .form ol {
    padding: 0;
    margin: 0;
  }
  
  .form ol li {
    margin: 0;
  }
  
  .form fieldset {
    padding: 10px 0;
  }
  
  .questions {
    list-style: decimal outside none;
  }
  
  .questions li {
    padding-left: 40px;
  }
  
  .questions.questions--likert .question {
    display: flex;
  }
  
  .questions.questions--likert .question .description {
    flex: 0 0 300px;
    margin: 0;
    padding: 0 0 0 40px;
  }
  
  .questions.questions--likert .question ul {
    display: flex;
    flex: 0 0 420px;
    list-style: none outside none;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  .questions.questions--likert .question ul li {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
  }
  
  .questions.questions--likert .question ul li .input-container {
    width: 100%;
  }
  
  .input-container.input-container--radio {
    border-radius: 6px 6px 0 0;
    background: transparent;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
  }
  
  .input-container.input-container--radio:hover {
    background-color: #efefef;
  }
  
  .input-container.input-container--radio:hover .value {
    display: inline-block;
    position: absolute;
    padding: 5px 10px;
    top: 100%;
    left: 0;
    width: 100%;
  }
  
  .input-container.input-container--radio .value {
    background: #bfbdbc;
    clear: both;
    color: #28211e;
    display: block;
    font-size: 0.857143rem;
    text-align: center;
    width: 100%;
    display: none;
    border-radius: 0 0 6px 6px;
    box-shadow: inset 0px 3px 2px -2px rgba(0, 0, 0, 0.25);
  }
  </code></pre>