Using position: relative inside a flex container

Question

I am making preview of post like its text and image as a background with some filters.

The problem is that I want to have the whole div not 1300px, but only 650px.

However, this way I will not be able to use display: flex and will not have div with img the same height as the div with text.

Is there any possible way to solve this problem only with css (without js)?

Here is the code: http://codepen.io/anon/pen/RGwOgN?editors=1111

.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;
}

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum</h1>
    <h2>text here</h2>
    <p class="lead">text hete</p>
  </div>
  <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)">
    <div></div>
  </div>
</div>

So as you see it works fine, but only if parent element (flex-row) is set to size*2, because another way the size of children elements will be automatically reduced.

Thaumaturgy

Answer 1

Relative positioning keeps elements in the normal flow. That means that after you position them, their original location is still occupying space.

Absolute positioning removes elements from the normal flow. These elements do not take up space, so they can be aligned without disturbing the surrounding layout.

This should work for you:

.flex-row {
  display: flex;
  width: 650px;                       /* 1 */
  position: relative;                 /* 2 */
}
.post {
  width: 100%;
  padding: 25px 25px;
  z-index: 10;
  color: white;
}
.back-img {
  position: absolute;                 /* 3 */
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 0;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  overflow: hidden;
}

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum dolor</h1>
    <h2>Lorem ipsum dolor sit amet, cu melius feugiat delenit mei. Sea cu tale etiam definitiones. An pro scribentur omittantur, ei sea utinam hendrerit. Has ad dico illud fierent. Vis tale modus ridens te.

Vix viris zril forensibus eu, dolor expetendis dissentiunt duo in. Vis id ludus theophrastus. Debitis tibique necessitatibus quo ea. At movet bonorum intellegat eos. Nec ne ubique erroribus. Rebum accusata est ad.</h2>
    <p class="lead">{{post.summary}}</p>
  </div>
  <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)">
    <div></div>
  </div>
</div>

http://codepen.io/anon/pen/XjWQxo

Notes:

1. primary container width changed from 1300px to 650px
2. make primary container the bounding box (nearest positioned ancestor) for absolute positioning of children
3. image is taken out-of-flow and occupies full width and height of parent div

Swanner