`align-items: flex-end` breaks `overflow: auto`

Question

For some strange reason, adding align-items: flex-end or even flex-start breaks the nicely scrolled overflow behavior of the pink flexed item because it's taller than the container height.

If this is expected behavior, help me retain the scroll even in flex-end alignment.

Here's demo.

.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
}

<div style="width: 200px; position:relative; top: 200px; background: silver;">
  <div class="slidesWrap" style="height:200px">
    <div class="slide">
      <div style="height:300px; width:100%; background: pink;">content</div>
    </div>
    <div class="slide">
      <div style="height:30px; width:100%; background: green;">content</div>
    </div>
  </div>
</div>

G-Cyrillus · Answer 1 · 2017-04-03T21:37:22.443

another way can be : max-height:100%;

.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

<div style="width: 200px; position:relative; top: 200px; background: silver;">
  <div class="slidesWrap" style="height:200px">
    <div class="slide">
      <div style="height:300px; width:100%; background: pink;">content</div>
    </div>
    <div class="slide">
      <div style="height:30px; width:100%; background: green;">content</div>
    </div>
  </div>
</div>

or max-height + margin without align-items:

.slidesWrap {
  display: flex;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
  margin-top:auto;
}

<div style="width: 200px; position:relative; top: 200px; background: silver;">
  <div class="slidesWrap" style="height:200px">
    <div class="slide">
      <div style="height:300px; width:100%; background: pink;">content</div>
    </div>
    <div class="slide">
      <div style="height:30px; width:100%; background: green;">content</div>
    </div>
  </div>
</div>

or use column flow :

.slidesWrap {
  display: flex;
  flex-flow: column wrap;
  justify-content:flex-end
}

.slide {
  overflow: auto;
  width:50%;
}

   <div style="width: 200px; position:relative; top: 200px; background: silver;">
        <div class="slidesWrap" style="height:200px">
            <div class="slide">
                <div style="height:300px; width:100%; background: pink;">content</div>
            </div>
            <div class="slide">
                <div style="height:30px; width:100%; background: green;
">content</div>
            </div>
        </div>
</div>

@Birowsky , lol, nop, sometimes its good to a break and look at something else. For the fun: You could even reverse the scroll(mouse) and show bottom instead top http://codepen.io/gc-nomade/pen/RpdVQJ — G-Cyrillus, Apr 03 '17 at 21:22
could you help me achieve the same here? http://jsbin.com/fidojey/2/edit?html,output It's closer to my actual problem and it doesn't work on Safari. — Daniel Birowsky Popeski, Apr 04 '17 at 16:21
I just came up with this solution: http://jsbin.com/fidojey/4/edit?html,output but it kinda defies the purpose of `flex` — Daniel Birowsky Popeski, Apr 04 '17 at 16:39
@Birowsky yes it does. problem here is `flex-direction:column` and it is useless since of `.anotherWrap` has a single child. block just does fine. What is the purpose of that funny test ? — G-Cyrillus, Apr 04 '17 at 18:49
It just represents how my deeply nested components are currently related to each other. But yeah.. flex is kinda letting me down on quite a few cases of mine. Considering how much cross platform/browser testing it requires, I guess I'll just change my strategy to 'enhance with flex' in favor of 'all things flex'. — Daniel Birowsky Popeski, Apr 04 '17 at 22:53

score 4 · Accepted Answer · edited May 23 '17 at 10:30

4

The align-items and align-self properties are clearly breaking the scroll function.

Fortunately, there is a simple and clean alternative: flex auto margins.

flex-row {
  display: flex;
}

.slide {
  overflow: auto;
  flex: 1;
  display: flex;

}

.slide > div {
  margin-top: auto; /* pin items to bottom */

}

<div style="width: 200px; background: silver;">
  <flex-row class="slidesWrap" style="height:200px">
    <div class="slide" style="">
      <div style="height:300px; width:100%; background: pink;"></div>
    </div>
    <div class="slide" style="">
      <div style="height:30px; width:100%; background: green;"></div>
    </div>
  </flex-row>
</div>

More about flex auto margins here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

edited May 23 '17 at 10:30

Community

1
1

answered Apr 03 '17 at 20:56

Michael Benjamin

346,931
104
581
701

so did you like.. invent flex? :} – Daniel Birowsky Popeski Apr 03 '17 at 21:07
LOL. I just use it a lot at work. I'm waiting for browsers to implement [**CSS Grid Layout**](https://www.w3.org/TR/css3-grid-layout/), so I can start running with that one, too. – Michael Benjamin Apr 03 '17 at 21:11
double the fun xD – Daniel Birowsky Popeski Apr 03 '17 at 21:13

`align-items: flex-end` breaks `overflow: auto`

2 Answers2