How can I style flexbox children in multi-line

Question

I would like to set the height in the flex element only when it gets to the next line, how can I achieve this?

<div class="flex-container">
    <div class="flex-element">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="flex-element"> <!-- This is the element we want to conditionally style -->
        Second element
    </div>
</div>

CSS

.flex-container {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.flex-element {
     background-color: #cecece;
     margin: 1rem;
     text-align: center;
     padding: 0.5rem 1rem 0.5rem 1rem;
}

So, in this dummy example, I want to apply some specific style to the second flex element, but ONLY when it gets to the next line.

Is it possible?

Answer 1

In CSS, perhaps not , whether it is flexbox wrapping or float wrapping - you should use JS instead - see the demo below:

var flex_item_1 = $('.flex-container .flex-element').eq(0);
var flex_item_2 = $('.flex-container .flex-element').eq(1);

// detect wrapping
if(flex_item_2.offset().top > flex_item_1.offset().top + flex_item_1.outerHeight()) {
  // apply the required style here
  flex_item_2.css({'background-color' : '#0095FF'});
}

.flex-container {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
.flex-element {
  background-color: #cecece;
  margin: 1rem;
  text-align: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flex-container">
  <div class="flex-element">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flex-element">
    <!-- This is the element we want to conditionally style -->
    Second element
  </div>
</div>

<br/><br/>
<div class="flex-container">
  <div class="flex-element" style="width:50%">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flex-element">
    <!-- This is the element we want to conditionally style -->
    Second element
  </div>
</div>

Run codeHide result