Oleksii Kryzh Oleksii Kryzh - 3 months ago 10
CSS Question

Position relative in child element of display: flex

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.

Answer

Maybe this will 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
Comments