Ordered list rendered as flexbox doesn't show bullets/decimals (items also rendered as flexbox)

Question

I have an ordered list (ol) that has it's display property set to flex. Also the list items are rendered as flexboxes. Doing this results in the bullets (numbers) not being shown anymore.

Is there any way I can get the bullets to show on the ol with classes .questions.questions--likert (in the area where the 40px padding is)?

See Fiddle (contains SCSS): http://jsfiddle.net/3y5t0xpx/3/

HTML & compiled CSS below:

HTML

<form class="form  form--test" name="frm-identification" action="/" method="post">
    <fieldset>
        <h2>Identificatie</h2>
        <p>Gelieve volgende gegevens in te vullen vooraleer de test te starten.</p>
        <ol class="questions  questions--likert">
            <li class="question">
                <p class="description">Inventieve ideeen brengen</p>
                <ul>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-1" value="1" /><span class="value">1</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-2" value="2" /><span class="value">2</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-3" value="3" /><span class="value">3</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-4" value="4" /><span class="value">4</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-5" value="5" /><span class="value">5</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-6" value="6" /><span class="value">6</span></label></li>
                    <li><label class="input-container  input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-7" value="7" /><span class="value">7</span></label></li>
                </ul>
            </li>
        </ol>
    </fieldset>
</form>

Compiled CSS:

@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);
}

Answer 1

list-style applies to elements with display: list-item only – so by making your LI display: flex, you are removing the prerequisite for list-style to have any effect.

Using a counter is probably your best bet here.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters