Prevent flexbox inheritance

Question

I have the following HTML structure with CSS formatting.

What I want is the outer div using flex but the inner div not using flex but float style (by the reasons of the sortable drag-drop widget does not work under display as flex).

Specifically, the structure is as below:

<div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
  <div id="b" align="left" style="padding: 10px">
    <div id="multi" style="display: NOT flex;"></div>
       <div id="p" style=" float:left;"></div>
       <div id="q" style=" float:left;"></div>
    </div>
   </div>
</div>

So, to be precise, I want flex for a. Particularly for div multi, p and q. I don't want flex, so that they can be side-by-side in the layout. Could anyone suggest how to do that? Many thanks.

---

The following is my working example run by Django on Python 3.5 for Michael_B's advice:

The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the

blocks and Group A/B side by side, however, the Group A and B can be dragged to the

block side for sorting/grouping:

{% extends "admin_content.html" %}

{% load static %}

{% block header_extra%}
    <link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
    {% include "fancybox/fancybox_css.html" %}

  <!-- AngularJS -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  
  <!-- Sortable.js -->
  <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>

    <!-- ng-sortable.js -->
  <script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>

    <!-- app.js -->
  <script src="http://rubaxa.github.io/Sortable/st/app.js"></script>
  <link href="/static/app.css" rel="stylesheet" type="text/css">


{% endblock %}

{% block admin_right%}

            <div id="multi" >

                <div class="tile__list" style="float:left; min-height:100%; min-width=1200px">
                    {% for field in table %}
                        <p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"><font size="2px">{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}</font></p>
                    {% endfor %} 
                </div>


                <div class="layer tile" >

                    <div class="tile__name" style=" float:left;">Group A</div>
                        <div class="tile__list">

                        </div>
                    </div>

                <div class="layer tile" >

                    <div class="tile__name" style=" float:left;">Group B</div>
                        <div class="tile__list">

                        </div>
                    </div>
                </div>
            </div>




        <script id="jsbin-javascript">
        angular.module('demo', ['ng-sortable'])
          .controller('DemoController', ['$scope', function ($scope) {
            $scope.firstList = ['foo 1', 'foo 2', 'foo 3'];

            $scope.secondList = ['bar 1', 'bar 2'];
            $scope.sortableOptions = {
              group: 'ng',
              animation: 200
            }
        }]);


        var el = document.getElementById('multi');
        var sortable = Sortable.create(el, {
            animation: 150,
            handle: ".tile__name",
            draggable: ".tile"
        });
        [].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
            Sortable.create(el, {
                group: 'blocks',
                animation: 150
            });
        });


        </script>


        {#{% load django_tables2 %}#}
        {#{% render_table table %}#}
{% endblock %}

And this template is further extend to another template of "admin_content.html" which use display flex in div:

{% extends "main.html" %}

{% load static %}

{% block header_extra%}{% endblock %}

{% block content_main%}
<div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
        <nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;">
          <a class="w3-border-bottom" href="#">Function A</a>
          <a class="w3-border-bottom" href="#">Function B</a>
          <a class="w3-border-bottom" href="#">Function C</a>
          <a class="w3-border-bottom" href="#">Function D</a>
          <a class="w3-border-bottom" href="#">Function E</a>
        </nav>
    <div align="left" style="display:flex; padding: 10px;">
    {% block admin_right%}{% endblock %}
    </div>
</div>
{% endblock %}