3

I need to have a scrolling flexbox container with flexbox children. The container has a (by flexbox) defined height, the children should be just as high as their content.

This works well except in Safari, where the children won't stretch beyond the container's height. Actually, the behavior in Safari is exactly the same as if the children had min-height: 0, but they don't. Explicitly setting min-height: auto doesn't help.

div {
  background-color: rgba(0,0,0,.1);
  box-sizing: border-box;
  margin: 4px;
  padding: 4px;
}

.fixed {
  height: 100%;
  left: 0;
  max-height: 400px;
  position: fixed;
  top: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  /* Safari behaves like min-height: 0; */
}

.full {
  flex: 1;
  overflow-y: auto;
}

.big {
  font-size: 200px;
  line-height: 1;
  margin: 0;
}
<div class="fixed">
  <div class="flex" style="height: 100%">
    <div>
      A
    </div>
    <div class="flex full">
      <div class="flex">
        B_1
      </div>
      <div class="flex">
        <p class="big">B_2</p>
      </div>
      <div class="flex">
        <p class="big">B_3</p>
      </div>
    </div>
    <div>
      C
    </div>
  </div>
</div>

I couldn't find any recent flexbox bugs documented for Safari, but for me this looks like one. I encountered this in Safari 13 on MacOS (Catalina) and in Safari and Chrome on iOS 12.

Is their an CSS-only way to fix or work around this?

Matthias Samsel
  • 937
  • 1
  • 8
  • 14

2 Answers2

6

I don't know why, but min-height: fit-content it works as expected:

div {
  background-color: rgba(0, 0, 0, .1);
  box-sizing: border-box;
  margin: 4px;
  padding: 4px;
}

.fixed {
  height: 100%;
  left: 0;
  max-height: 400px;
  position: fixed;
  top: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  /* Safari behaves like min-height: 0; */
}

.full {
  flex: 1;
  overflow-y: auto;
}

.big {
  font-size: 200px;
  line-height: 1;
  margin: 0;
}

.min-fit {
  min-height: fit-content;
}
<div class="fixed">
  <div class="flex" style="height: 100%">
    <div>
      A
    </div>
    <div class="flex full">
      <div class="flex min-fit">
        B_1
      </div>
      <div class="flex min-fit">
        <p class="big">B_2</p>
      </div>
      <div class="flex min-fit">
        <p class="big">B_3</p>
      </div>
    </div>
    <div>
      C
    </div>
  </div>
</div>
mesqueeb
  • 5,277
  • 5
  • 44
  • 77
Matan Sanbira
  • 1,433
  • 7
  • 20
  • Thanks ^^ apparently the dev tool of Safari is even worse than I though, since it doesn't auto-complete this option... – Matthias Samsel Jan 28 '20 at 14:18
  • thank you so much for this answer, such a frustrating issue. No idea why this isn't set by default... totally broken without it! – JD. Aug 24 '20 at 06:12
0

Here is the underlying issue with fixes: https://github.com/philipwalton/flexbugs#flexbug-1

JD.
  • 2,361
  • 6
  • 25
  • 38