Display: Flex loses right padding when overflowing?

Chris Spittles picture Chris Spittles · Nov 12, 2014 · Viewed 10.3k times · Source

I have an issue with a CSS3 flexbox.

If I set the flexbox element to overflow and set a min-width value for the children, the right padding on the parent is lost? This is consistent on all supporting browsers.

Here is an example of the error. If you scroll to the right of the container you will see the last child is hard up against the right edge of the container instead of honoring the padding value.

Does anyone know why this is and how I would go about correcting it? I've messed around with padding and margin values in different combinations without success.

Answer

dholbert picture dholbert · Nov 12, 2014

You need to add another layer of wrapping, if you want to have both "overflow-x:auto" with scrollable padding at the end.

Something like this:

.scroll {
    overflow-x: auto;
    width: 300px;
    border:1px #ccc solid;
}
.outer {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    min-width: 100%;
    height: 80px;
    padding: 5px;
    float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}
<div class="scroll">
  <div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
  </div>
</div>