基于 (flex) 项目内容的 CSS 布局

Question

I've written some JavaScript to accomplish this, but it's performance is slowing down my component and its not clean so I'm struggling to find more efficient CSS solution which would optimize it. I've searched the web with no effect.

So basically we have this template (simplified):

<div class="container">
  <div class="box"></div>
  <div class="container">
      <div class="box"></div>
      <div class="box"></div>
  </div>
</div>

All 3 .box 's are taking 1/3 (ie calc(100% / 3) ) and rendered in a row.

If at least one of that box 's content overflowing it's dedicated space - all 3 suppose to render in column (ie flex-direction: column ). Is there any way to achieve this using flexboxes and no JavaScript?

Note: this chunk is rendered inside a responsive component(dropdown), that is 100% of it's grid cell. And it may take 100% of the screen as well as 10%. So I cant use any media-queries here.

Answer 1

if you want wrap last item, you can use flex-wrap:wrap; in flexbox container and if flex items don't have specific width you can use min-width.

if you want change direction of flex box in one breakpoint you can use @media like this:

@media screen and (max-width:680px){
    .flexContainer{
        flex-direction:column;
    }
}