50% width of item using nowrap and scroll not working

Question

Need to display each item width 50% with overflow-x: scroll.

But it is displaying 3 items instead 2 items.

Here is my desired output-

But my output is like this-

.products {
  flex-flow: row nowrap;
  overflow-x: scroll;
  white-space: nowrap;
  display: flex;
}

.products li {
  width: calc(100% / 2);
}

<ul class="products">
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
</ul>

Yes tried didn't work. Actually I need the items width 50%. Scrolling is not the issue — Hakik Zaman, May 06 '21 at 18:21

score 1 · Accepted Answer · answered May 06 '21 at 18:23

Don't use width on the li use flex properties like so:

.products {
  flex-flow: row nowrap;
  overflow-x: scroll;
  white-space: nowrap;
  display: flex;
}

.products li {
  flex: 0 0 50%;
}

<ul class="products">
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
  <li class="temashop-product">
    <a href="#">
      <img src="assets/images/product-placeholder.png" alt="Product">
      <h2>Product heading</h2>
      <p class="short-description">Product description</p>
      <span class="price">$35.00</span>
    </a>
  </li>
</ul>

score 0 · Answer 2 · answered May 06 '21 at 19:20

The problem is the flex-shrink property.

In a flex container, flex-shrink defaults to 1, meaning that flex items are allowed to shrink to avoid overflowing the container.

You need to disable this feature, so that flex items always keep their defined width.

Add this to your code:

.products li {
   width: calc(100% / 2);
   flex-shrink: 0; /* new */
}

Or, more efficiently, just use this:

.products li {
   flex: 0 0 50%; /* flex-grow, flex-shrink, flex-basis */
 }

More details @MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

50% width of item using nowrap and scroll not working

2 Answers2