0

Note: NOT a duplicate of : Flexbox displays divs incorrectly rather than making the container scrollable Can't scroll to top of flex item that is overflowing container

My use-case attempts to center the overflowing items. Solutions acknowledge this limitation, without solving it. (Their items are not centered)

Imagine if Netflix presented their choices with the middle item positioned in the center of the screen. That's the effect I'm going for with my columns sroller, but my first item is partially cut off. I found a solution on SO using jQuery, but I'd rather wrestle CSS into submission. Need to tag one of you in though... got any ideas?

* {
  font-family: sans-serif;
}

.options-wrapper {
  font-size: 3vw;
  text-align: center;
}
.options-wrapper .options-visualized {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  justify-content: center;
  margin: 0 auto;
}
.options-wrapper .options-visualized .option {
  flex-basis: 40vw;
  flex-shrink: 0;
  margin: 0 8vw;
  display: flex;
  flex-direction: column;
}
.options-wrapper .options-visualized .option:first-of-type {
  margin-left: 2vw;
}
.options-wrapper .options-visualized .option:last-of-type {
  margin-right: 2vw;
}
.options-wrapper .options-visualized .option img {
  width: 100%;
  margin: 0 auto;
}
.options-wrapper .options-visualized .option .option-label {
  margin-top: 1em;
  flex-basis: 100%;
  font-size: 0.92em;
  line-height: 1.25;
}
.options-wrapper .options-visualized .option .option-label span {
  display: block;
}
<div class="options-wrapper graded-bg">
  <h6 class="options-title">options:</h6>
  <div class="options-visualized">
    <div class="option">
      <img src="https://cdn.pixabay.com/photo/2020/03/19/23/32/willow-catkin-4949064_960_720.jpg">
      <div class="option-label"><span class="name">Option 1</span></div>
    </div>
    <div class="option">
      <img src="https://cdn.pixabay.com/photo/2020/03/19/23/32/willow-catkin-4949064_960_720.jpg">
      <div class="option-label"><span class="name">Option 2</span></div>
    </div>
    <div class="option">
      <img src="https://cdn.pixabay.com/photo/2020/03/19/23/32/willow-catkin-4949064_960_720.jpg">
      <div class="option-label"><span class="name">Option 3</span></div>
    </div>

  </div>
</div>

Here's a pen: https://codepen.io/sashaikevich/pen/yLgbWQx

sashaikevich
  • 167
  • 13
  • Are you sure you need to use flex boxes? – Ajith Gopi Apr 09 '21 at 09:40
  • Maybe not. This is part of a template for a dynamic page, where the number of items can be 1-5. Nowrap flex aligns them nicely for me, and lets me align the slide's content when one of the images is shorter than the others. But, I'm happy to explore any other css solutions you think would center the children of the scrollable, overflowing options-visualized div. – sashaikevich Apr 09 '21 at 14:42

1 Answers1

0

I just edited &:last-of-type to be like this :

&:last-of-type {
        margin-right: -56vw;
}

Try this Example to know what I mean :

https://codepen.io/kevinmmansour/pen/VwPrJGw

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
  • Thanks Kevin. The problem is showing the first element AND centering the child div. It's the last part that's giving me trouble. It would be easier to remove the center attribute from justify-content to fix the first part. That second part though, no idea... – sashaikevich Apr 09 '21 at 14:39
  • @sashaikevich .. You are Welcome .. Do you mean that child div is second div in the scroll bar or What ? – Kevin M. Mansour Apr 09 '21 at 14:50
  • the div that you got ot scroll should start in center, with first element partially off-screen on the left, and 3rd element partially off-screen on the right – sashaikevich Apr 09 '21 at 14:58
  • @sashaikevich Sorry but you mean that you need to center second element (Option 2) .. That is Right and (Option 1) be left .. (Option 3) be right :) – Kevin M. Mansour Apr 09 '21 at 15:03
  • yes, exactly. so it loads looking like it does in my pen, but scrollable in both directions (not only to the right, as it is now) – sashaikevich Apr 09 '21 at 16:50
  • @sashaikevich .. I searched a lot But I did not found answers or Solution for the problem .. I recommend to Ask the Question on Stack Overflow but without `Justify-content:center;` .. As You need to center Second Card in the Center .. Wish you a Great Day :) – Kevin M. Mansour Apr 10 '21 at 16:00
  • 1
    Thank you. I too couldn't find a solution. I'll just use good ol' js for this. – sashaikevich Apr 11 '21 at 21:18