2

I have found that a flexbox container does not scroll through all child elements properly with overflow: auto and justify-content: center. With fewer elements, everything works well (elements are centered in the container). When the content overflows, however, elements to the left are cut off inside the scrolling div.

I have found that setting justify-content: space-between does not cut anything off, but that is not the intended behavior. I also know this can be done sans flexbox, but does anyone know why this is not working?

JSFiddle examples:

Few elements, works fine: https://jsfiddle.net/z50g5ysu/2/

Overflowing elements, those to left get cut off: https://jsfiddle.net/z50g5ysu/3/

HTML:

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 400px;
  border: 2px solid red;
  overflow-x: auto;
}

.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  margin: 10px;
  flex: none;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Malachi Willey
  • 318
  • 4
  • 11
  • you don't want the elements to cut off? no really clear what is bothering you in the second jsfiddle? – Yehia Awad Jun 15 '16 at 20:44
  • 1
    @YehiaAwad cut of the first element I guess – DaniP Jun 15 '16 at 20:46
  • @Michael_B can you clarify why this is a duplicate? ... Maybe modify the fiddle from OP ... I can't have success with the answer on the duplicate – DaniP Jun 15 '16 at 21:15
  • @DaniP, from the accepted answer: *...there is a problem with [`justify-content: center`] when the flex item is bigger than the flex container ... When the flex item overflows the container the top becomes inaccessible. For horizontal overflow, the left section becomes inaccessible... Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.* – Michael Benjamin Jun 15 '16 at 21:18
  • @MIchael_B Thank you, I seem to have missed that post. Unfortunately, this method appears to have the same properties as `justify-content: space-around` rather than `justify-center`, which I was seeking. There appears to be no flexbox based solution, however. – Malachi Willey Jun 15 '16 at 21:38
  • @MalachiWilley, the section from MDN in the answer tries to explain the current options and limitations. – Michael Benjamin Jun 15 '16 at 22:28

0 Answers0