How do I set width for a flex item with horizontal scroll?

Question

I am using display: flex to do a 3 column layout on desktop view.

However starting on 540px and below, I still want the layout to be 3 columns but it should have a horizontal scroll. I was able to achieve horizontal scroll through white-space: nowrap; overflow-x: auto;. My problem is that I find each flex item or column too wide.

I want to show 1 or products on mobile view but put a horizontal scroll at the same time to scroll for the 3rd product.

Do you have any idea how can I set a width for each flex-item or column? By means of giving it a 150px or any depending on your idea. Your help is greatly appreciated. Thanks.

.blog-articles-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-x: unset;
  white-space: normal;
}

.blog-articles-list .flex-item {
  flex-basis: 33.33%;
}

@media only screen and (max-width: 540px) {
  .blog-articles-list {
    white-space: nowrap;
    overflow-x: auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

<div class="col-12">
  <div class="blog-articles-list">
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>

    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">guides</div> <a class="header-5 semi-bold" href="/blogs/articles/how-to-lighten-pigmentation-naturally">How to lighten pigmentation naturally?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>

Answer 1

Not to sure about what you expect, it should not wrap below 540px and remain 3col with a scrollbar.

flex-basis:33.33% will shrink them and is not enough, you'll need to set a min-width or reset flex-shrink.

Example with min-width and minimal code.

But, please clarify about behavior expected below 540px and upper 541px.

.blog-articles-list {
  display: flex;
  flex-wrap: wrap;
  overflow:auto;/* ?? here or at 540px */
}

.blog-articles-list .flex-item {
  flex-basis: 33.33%;

}

@media only screen and (max-width: 540px) {
  .blog-articles-list {
    flex-wrap: nowrap;
  }
.blog-articles-list .flex-item {
  min-width:50%
}
}

<div class="col-12">
  <div class="blog-articles-list">
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">events</div> <a class="header-5 semi-bold" href="/blogs/articles/should-you-wash-your-face-with-cold-water">Should you wash your face with cold water?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
        </p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">guides</div> <a class="header-5 semi-bold" href="/blogs/articles/how-to-lighten-pigmentation-naturally">How to lighten pigmentation naturally?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>

Answer 2

Simply add flex-shrink:0 and flex-basis:100%

.blog-articles-list {
  display: flex;
  overflow:auto;
}

.blog-articles-list .flex-item {
  flex-basis: 33.33%;
}

@media only screen and (max-width: 540px) {
  .blog-articles-list .flex-item {
    flex-basis: 100%;
    flex-shrink: 0;
  }
}

<div class="col-12">
  <div class="blog-articles-list">
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>

    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">guides</div> <a class="header-5 semi-bold" href="/blogs/articles/how-to-lighten-pigmentation-naturally">How to lighten pigmentation naturally?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>