title: Display flex not allowing for inline text align and styles
body: <p>I've made a CMS that allows users to use an editor and drag/drop images as well as text and formatting.</p>
  
  <p>I have them using different templates, and my example below uses one that has a larger content area on the right half of the page, and smaller content areas on the left top and left bottom.</p>
  
  <p>The images are good, but as you can see in the snippet (you have to run it and show it in full screen to see what I mean) even though my <code>bottomLeftContent</code> and <code>rightContent</code> areas have a <code>p</code> tag with <code>text-align: center</code> and right, they are both floated to the left.</p>
  
  <p>Now, if I inspect the page and turn off <code>display:flex</code> for middle p, then they align properly but it messes up how my page should show (no scrolling, so the areas need to stack together the way they are.</p>
  
  <p>How can I keep display flex but allow for inline p styles to work? (also, the content in the p tags is from TinyMCE editor so I can't hardcode !important or anything like that)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
  }
  
  .middle p{
      max-height:100%;
      margin-bottom:0;     
      position: absolute; 
      top:0; 
      right:0; 
      bottom:0; 
      left:0;
      display:flex;
  }
  
  img {
      object-fit: scale-down;
      width: 100%; 
      margin:0 auto;
  }
  
  #topLeftContent{
      display:flex;
      justify-content:center;
      align-items:center;
      overflow: hidden;
      height:100%;
  }
  
  #topLeftContent img{
      object-fit: contain;
  }
  
  .topLeftContent{
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
  }
  
  .topLeftContent&gt; img{
      min-width:100%;
      min-height: 100%;
      width: auto;
      height: auto;
  }
  
  #bottomLeftContent{
      display:flex;
      justify-content:center;
      align-items:center;
      overflow: hidden;
      height:100%;
      background-color: blue;
  }
  
  #bottomLeftContent img{
      object-fit: contain;
  }
  
  .bottomLeftContent{
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
  }
  
  .bottomLeftContent&gt; img{
      min-width:100%;
      min-height: 100%;
      width: auto;
      height: auto;
  }
  
  #rightContent{
      display:flex;
      justify-content:center;
      align-items:center;
      overflow: hidden;
      height:100%;
  }
  
  #rightContent img{
      object-fit: contain;
  }
  
  .rightContent{
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
  }
  
  .rightContent&gt; img{
      min-width:100%;
      min-height: 100%;
      width: auto;
      height: auto;
  }
  
  .my-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      width:100vw;
  }
  
  .my-container .top.row, 
  .my-container .row.bottom {
      flex-shrink: 0;
  }
  
  .my-container&gt;.top [class^="col-"],
  .my-container&gt;.bottom [class^="col-"] {
      background-color: #778899  ;
      color: white;
      text-align: center;
  }
  
  .my-container&gt;.middle {
      flex-grow: 1;
      padding:30px;
      background-size: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
      
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous"&gt;
      &lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      
      
      &lt;div class="container-fluid my-container"&gt;
          
          &lt;div class="row top"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="row" style="background-color: #778899;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="row middle"&gt;
              
              &lt;div class="col-lg-6"  &gt;
                  &lt;div class="row" style="height:50%; padding-bottom: 15px;"&gt;
                      &lt;div class="col-lg-12" style="height:100%;"&gt;
                          &lt;div class="topLeftContent" id="topLeftContent"&gt;
                              
                              &lt;p&gt;&lt;img class="mySlides" src="images/Picture1.jpg" /&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row flex-center--horiz" style="height:50%; padding-top: 15px; background-color: tomato;"&gt;
                      &lt;div class="col-lg-12" style="height:100%;"&gt;
                          &lt;div class="bottomLeftContent" id="bottomLeftContent"&gt;
                              &lt;p style="text-align: center; color: white;"&gt;SHOULD BE CENTERED&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6" &gt;
                  &lt;div class="rightContent" id="rightContent"&gt;
                      
                      &lt;p style="text-align: right;"&gt;Paragraph over here&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--end row middle--&gt;
          
          &lt;div class="row bottom"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div&gt;&lt;h2&gt;Ticker&lt;/h2&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/div&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>