0

I'm trying to not use Javascript on this. I have a list of boxes with same width but the first child has a different height;

I'm using flex to display the list in a row so I can scroll horizontally between the boxes. But in mobile resolution, I want flex to put the first element on a top row, and the rest on a second row.

I could achive if I set the flex-flow to wrap, but then I loose the scrolling. The closest thing I could find was this, but doesn't have horizontall scroll.

Jsfiddle Demo approach From CSS flex, how to display one item on first line and two on the next line 

.section {
  display:flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.home_box{
  flex: 0 0 auto;
  width:60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.home_box:first-child{
  height: 600px;
}
<div class="section menu_section_1">
            <div class="home_box box_2"></div> 
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
</div>
Luke Marks
  • 157
  • 1
  • 1
  • 11

1 Answers1

1

Try using the below snippet. You might need to adjust the second section inside div width, but you can check the outer structure and apply media queries to achieve what you want.

.section {
  display: flex;
  flex-flow: row wrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.second-section {
  display: flex;
  flex-flow: row nowrap;
  flex-grow:1;
}

.home_box {
  flex: 0 0 auto;
  width: 60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.first-section {
  height: 600px;
}

@media (min-width: 576px) {
  .section {
    flex-flow: row nowrap;
  }
}
<div class="section menu_section_1">
  <div class="home_box box_2 first-section"></div>
  <div class="second-section">
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
  </div>
</div>
Charu Maheshwari
  • 1,583
  • 1
  • 8
  • 9
  • Yes, that would be a workaround solution I was trying right now, but that involves Javascript in my case. My structure it's already writen so I'd have to add javascript when mobile resolutions are detected. Anyway I apprecciate your answer. – Luke Marks Aug 03 '18 at 11:40