title: Using position: relative inside a flex container
body: <p>I am making preview of post like its text and image as a background with some filters.</p>
  
  <p>The problem is that I want to have the whole div not <code>1300px</code>, but only <code>650px</code>.</p>
  
  <p>However, this way I will not be able to use <code>display: flex</code> and will not have div with img the same height as the div with text.</p>
  
  <p>Is there any possible way to solve this problem only with css (without js)? </p>
  
  <p>Here is the code: <a href="http://codepen.io/anon/pen/RGwOgN?editors=1111" rel="noreferrer">http://codepen.io/anon/pen/RGwOgN?editors=1111</a></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>.post {
    width: 650px;
    padding: 25px 25px;
    z-index: 10;
    position: relative;
    color: white;
  }
  .flex-row {
    display: flex;
    width: 1300px; /* here is a problem */
  }
  .back-img {
    width: 650px;
    background-size: cover;
    position: relative;
    z-index: 0;
    left: -650px;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: url(#blur);
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-row"&gt;
    &lt;div class="post"&gt;
      &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
      &lt;h2&gt;text here&lt;/h2&gt;
      &lt;p class="lead"&gt;text hete&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="back-img" style="background-image: linear-gradient(
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.3)
      ),url(http://unsplash.com/photos/g-AklIvI1aI/download)"&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So as you see it works fine, but only if parent element (<code>flex-row</code>) is set to size*2, because another way the size of children elements will be automatically reduced.</p>