Use position: relative inside the flexible container

Question

I am doing a preview of the message, both 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: flexand will not have a div with img of the same height as a 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>

Run codeHide result

So, as you can see, it works fine, but only if the parent ( flex-row) is set to * 2, since otherwise the size of the children will be reduced.

Answer 1

. , - .

. , , .

:

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

Hide result

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

:

• 1300 650
• ( )
• div