Prevent flexbox inheritance - html

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 %}