troubleshooting Question

Why doesn't Flexbox display this code as a 3x2 grid?

Avatar of dlearman1
dlearman1Flag for United States of America asked on
* flexboxCSSHTML
5 Comments1 Solution11 ViewsLast Modified:
I'm expecting this Flexbox code to produce a 3x2 grid layout. Instead, the result is stacked into a single column. I can't see what is wrong in the code. Hopefully, someone can show me where I've gone wrong.
HTML
 <div class="l-cell-wrapper">
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Firefox</p>
                <li class="c-cell__item">In Firefox's address bar, type "about:config" and press Enter</li>
                <li class="c-cell__item">Click the "Accept the Risk and Continue"  warning message that appears</li>
                <li class="c-cell__item">Type "Javascript" in the Search Box</li>
                <li class="c-cell__item">Scroll down to "javascript.enabled"</li>
                <li class="c-cell__item">Click the right column toggle button to set value to "true"</li>
                <li class="c-cell__item">Refresh Firefox</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Edge</p>
                <li class="c-cell__item">click the "Settings and More Button" (three horizontal dots) at right of top menu bar</li>
                <li class="c-cell__item">Select "Settings" (gear wheel symbol) menu item</li>
                <li class="c-cell__item">Type "Javascript" in the Search Box</li>
                <li class="c-cell__item">Click on "JavaScript" label</li>
                <li class="c-cell__item">Select "Allowed (recommended)</li>
                <li class="c-cell__item">Refresh Edge</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Chrome</p>
                <li class="c-cell__item">Type "chrome://settings/content/javascript" In Chrome's address bar</li>
                <li class="c-cell__item">Under "Default Behavior" select "Sites Can Use Javascript (recommended)"</li>
                <li class="c-cell__item">Refresh Chrome</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Opera</p>
                <li class="c-cell__item">Select "Site Settings" (gear wheel symbol) from left margin menu</li>
                <li class="c-cell__item">Type "javascript" in "Search Settings Box"</li>
                <li class="c-cell__item">Select "Site Settings"</li>
                <li class="c-cell__item">Under "Content" on the drop-down menu, select "JavaScript"</li>
                <li class="c-cell__item">Select "Allowed (recommended)"</li>
                <li class="c-cell__item">Refresh Opera</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
                <p class="c-cell__title">Safari</p>
                <li class="c-cell__item">From menu bar at top of the window, select "Edit" (Win)/"Safari" (Mac)</li>
                <li class="c-cell__item">From drop-down menu, select "Security" (Win)/"Preferences" (Mac)</li>
                <li class="c-cell__item">Select the "Security" icon/tab (Mac only) at the top of the window</li>
                <li class="c-cell__item">Check the Enable JavaScript checkbox</li>
                <li class="c-cell__item">Close the dialog box to save changes</li>
                <li class="c-cell__item">Refresh your browser</li>
            </ol>
          </div>
          <div class="c-cell">
            <ol class="c-cell__list">
              <p class="c-cell__title">Mobile Browsers</p>
                <li class="c-cell__item">Follow the phone/tablet's instructions for your specific device and operating system version</li>
            </ol>
          </div>
      </div>
    </div>

Open in new window

CSS
.l-cell-wrapper {
 width: 100%;
}

.c-cell {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  &__title {
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
  }
  &__list {
    flex: 0 32%;
    margin: 0;
    padding: 0;
  }
  &__item {
    display: list-item;
    list-style-type: decimal;
    list-style-position: outside;
    color: $brand-black;
    margin-left: 4rem;
    padding: 0;
  }
}

Open in new window

RESULT
This is a partial screenshot of the output. The full result is simply a repetitive one-column stacking stacking.
 
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros