How can I style flexbox children in a multiline

Question

I would like to set height in a flex item only when it gets into 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 into the next line.

Is it possible?

I'm not 100% sure, but i'm afraid this isn't possible with CSS. — roberrrt-s, Nov 29 '16 at 15:11
If I did understand you correctly you want to have some kind of an `if{}` statement? That is not possible in CSS at the moment. You have to use JavaScript for that purpose. — Megajin, Nov 29 '16 at 15:16
Could you not use your server side language to test the content length of the first div and add a class to the second div if the content is long enough? CSS is a styling language, it shouldn't be used to try to do complex if statements — Pete, Nov 29 '16 at 15:24
Unfortunately I cannot use any server side logic for this matter. — Miles, Nov 29 '16 at 15:57
If you are able to use media queries to control wrapping behavior, then you can easily set the height of an element when it breaks to the next line, all with CSS. Without media queries you would have to resort to scripting because CSS doesn't notify a container when its children wrap. See this answer for more details: http://stackoverflow.com/a/37413580/3597276 — Michael Benjamin, Nov 29 '16 at 19:34

score 2 · Accepted Answer · answered Nov 29 '16 at 16:06

This is unfortunately not possible in CSS whether it is flexbox wrapping or float wrapping - you should use JS instead - see a 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>

How can I style flexbox children in a multiline

1 Answers1