title: Prevent flexbox inheritance
body: <p>I have the following HTML structure with CSS formatting.</p>
  
  <p>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). </p>
  
  <p>Specifically, the structure is as below: </p>
  
  <pre><code>&lt;div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;"&gt;
    &lt;div id="b" align="left" style="padding: 10px"&gt;
      &lt;div id="multi" style="display: NOT flex;"&gt;&lt;/div&gt;
         &lt;div id="p" style=" float:left;"&gt;&lt;/div&gt;
         &lt;div id="q" style=" float:left;"&gt;&lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, to be precise, I want flex for <code>a</code>. Particularly for div <code>multi</code>, <code>p</code> and <code>q</code>. 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. </p>
  
  <hr>
  
  <p>The following is my working example run by Django on Python 3.5 for Michael_B's advice:</p>
  
  <p>The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the <p> blocks and Group A/B side by side, however, the Group A and B can be dragged to the <p> block side for sorting/grouping:</p>
  
  <pre><code>{% extends "admin_content.html" %}
  
  {% load static %}
  
  {% block header_extra%}
      &lt;link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" /&gt;
      {% include "fancybox/fancybox_css.html" %}
  
    &lt;!-- AngularJS --&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"&gt;&lt;/script&gt;  
    &lt;!-- Sortable.js --&gt;
    &lt;script src="http://rubaxa.github.io/Sortable/Sortable.js"&gt;&lt;/script&gt;
  
      &lt;!-- ng-sortable.js --&gt;
    &lt;script src="http://rubaxa.github.io/Sortable/ng-sortable.js"&gt;&lt;/script&gt;
  
      &lt;!-- app.js --&gt;
    &lt;script src="http://rubaxa.github.io/Sortable/st/app.js"&gt;&lt;/script&gt;
    &lt;link href="/static/app.css" rel="stylesheet" type="text/css"&gt;
  
  
  {% endblock %}
  
  {% block admin_right%}
  
              &lt;div id="multi" &gt;
  
                  &lt;div class="tile__list" style="float:left; min-height:100%; min-width=1200px"&gt;
                      {% for field in table %}
                          &lt;p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"&gt;&lt;font size="2px"&gt;{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}&lt;/font&gt;&lt;/p&gt;
                      {% endfor %} 
                  &lt;/div&gt;
  
  
                  &lt;div class="layer tile" &gt;
  
                      &lt;div class="tile__name" style=" float:left;"&gt;Group A&lt;/div&gt;
                          &lt;div class="tile__list"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;div class="layer tile" &gt;
  
                      &lt;div class="tile__name" style=" float:left;"&gt;Group B&lt;/div&gt;
                          &lt;div class="tile__list"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
          &lt;script id="jsbin-javascript"&gt;
          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
              });
          });
  
  
          &lt;/script&gt;
  
  
          {#{% load django_tables2 %}#}
          {#{% render_table table %}#}
  {% endblock %}
  </code></pre>
  
  <p>And this template is further extend to another template of "admin_content.html" which use display flex in div:</p>
  
  <pre><code>{% extends "main.html" %}
  
  {% load static %}
  
  {% block header_extra%}{% endblock %}
  
  {% block content_main%}
  &lt;div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;"&gt;
          &lt;nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;"&gt;
            &lt;a class="w3-border-bottom" href="#"&gt;Function A&lt;/a&gt;
            &lt;a class="w3-border-bottom" href="#"&gt;Function B&lt;/a&gt;
            &lt;a class="w3-border-bottom" href="#"&gt;Function C&lt;/a&gt;
            &lt;a class="w3-border-bottom" href="#"&gt;Function D&lt;/a&gt;
            &lt;a class="w3-border-bottom" href="#"&gt;Function E&lt;/a&gt;
          &lt;/nav&gt;
      &lt;div align="left" style="display:flex; padding: 10px;"&gt;
      {% block admin_right%}{% endblock %}
      &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>