1

I used "overflow:auto" to flex container to let it scrollable when the items overflow, however when i scroll to the most right, the last item's right margin was not contained in this flex container. I want the all the items can show shadow correctly. Is there any workaround to add the last right margin to the container?

Here's an example:

.flex_container{
 display: flex;
 overflow: auto;
 border: 1px solid red;
}

.item{
 flex: 0 0 auto;
 margin: 5px 10px 5px 10px; // 1px 2px 3px 2px;
 box-shadow: 0 1px 3px 1px rgba(187,187,187,0.5);
}

.img_container{
 height: 80px;
 width: 200px;
}

.text_container{
 padding: 5px;
 width: 190px;
}
<div class="flex_container">
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information</div>
  </div>
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
    <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
    <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
    <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
  <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
    <div class="item">
   <div class="img_container"></div>
   <div class="text_container">Bing helps you turn information into action, making it faster</div>
  </div>
 </div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
杨晨豪
  • 21
  • 2

0 Answers0