Flex nowrap container not wrapping child. when the width of those are in mentioned in percentage

user_14267060 0
Viewed 111

I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.

here is what I did so far

*{
  box-sizing: border-box;
}

h2 {
  margin: 0;
}

body {
  background: cadetblue;
}

.container {
  width: 500px;
  margin: 0 auto;
  background: #000;
  padding: 20px 36px;
}

.scroll-wrapper {
  overflow: hidden;
  margin-right: -36px;
}

.scroll-inner {
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  margin: 0px -16px;
}


.card {
  height: 250px;
  width: 75%;
  flex: 1 0 75%;
  padding: 0px 16px;
}

.inner-wrapper {
  background: #fff;
  height: 250px;
}
<div class="container">
  <div class="scroll-wrapper">
     <div class="scroll-inner">
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
    </div>
  </div>
</div>

I have given a negative right margin for the wrapper to make it look like it's flowing from the right. Once the last element is scrolled/reached I want it to look something like this enter image description here

One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.

Updating few images that show what I'm really looking for

During scrolling

enter image description here

After scrolling till the last card enter image description here

flexbox css html
2 Answers

Try

.scroll-wrapper {
    overflow: hidden;
    margin: auto;
}

.scroll-inner {
    display: flex;
    flex-flow: row nowrap;
    overflow: auto;
    margin: auto;
}
user_153689540

I have found a fix and hope this help someone.

*{
  box-sizing: border-box;
}

h2 {
  margin: 0;
}

body {
  background: cadetblue;
}

.container {
  width: 500px;
  margin: 0 auto;
  background: #000;
  padding: 20px 36px;
}

.scroll-wrapper {
  overflow: hidden;
  margin-right: -36px;
}

.scroll-inner {
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  margin: 0px;
}


.card {
  height: 250px;
  width: 75%;
  flex: 1 0 75%;
  padding-right: 40px;
  margin-right: -8px;
}

.inner-wrapper {
  background: #fff;
  height: 250px;
}
<div class="container">
  <div class="scroll-wrapper">
     <div class="scroll-inner">
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
    </div>
  </div>
</div>

Please do answer if someone has a better solution!! Thanks

user_142670600
Related