diff --git a/client/src/styles.css b/client/src/styles.css
index 6048e93..0e26255 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -213,11 +213,25 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
   flex-direction: column;
   min-height: 0;
 }
+/* #39 follow-up: overflow-y: auto directly on a flex column that also has
+   justify-content: flex-end doesn't reliably scroll in WebKit/Safari (the
+   iOS 12+ targets this app builds for) — the flex-end-justified overflow
+   gets clipped instead of becoming a scrollable region, so from the user's
+   side it looked identical to the original overflow: hidden bug. Standard
+   workaround: the overflow/scroll and the flex-end alignment can't live on
+   the same element — .cart-items is now a plain scroll container (no
+   justify-content), and .cart-items-inner is the flex column that actually
+   bottom-anchors short lists via min-height: 100% (a floor, not a fixed
+   height, so it still grows past 100% and scrolls normally once content
+   overflows it). */
 .cart-items {
   flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
   margin-bottom: 6px;
+}
+.cart-items-inner {
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
diff --git a/client/src/tablet/Sale.tsx b/client/src/tablet/Sale.tsx
index d7ec122..bcda05f 100644
--- a/client/src/tablet/Sale.tsx
+++ b/client/src/tablet/Sale.tsx
@@ -198,45 +198,47 @@ export function Sale({ config, onChangeBar }: Props) {
 
       <div class="cart">
         <div class="cart-items">
-          {isEmpty && <div class="cart-line muted">Keine Einträge</div>}
-          {lines.map((l, i) => {
-            const d = drinkById.get(l.drink_id);
-            if (!d) return null;
-            return (
-              <div key={i} class="cart-line">
+          <div class="cart-items-inner">
+            {isEmpty && <div class="cart-line muted">Keine Einträge</div>}
+            {lines.map((l, i) => {
+              const d = drinkById.get(l.drink_id);
+              if (!d) return null;
+              return (
+                <div key={i} class="cart-line">
+                  <div class="cart-line-label">
+                    <button class="qty-btn" onClick={() => incLine(l.drink_id, -1)} aria-label="weniger">
+                      −
+                    </button>
+                    <span>{l.qty}× {d.name}</span>
+                    <button class="qty-btn" onClick={() => incLine(l.drink_id, 1)} aria-label="mehr">
+                      +
+                    </button>
+                  </div>
+                  <span>{formatCents(d.price_cents * l.qty)}</span>
+                </div>
+              );
+            })}
+            {bar.pfand_cents > 0 && pfandCount > 0 && (
+              <div class="cart-line pfand">
+                <span>{pfandCount}× Pfand</span>
+                <span>{formatCents(bar.pfand_cents * pfandCount)}</span>
+              </div>
+            )}
+            {pfandReturns > 0 && (
+              <div class="cart-line return">
                 <div class="cart-line-label">
-                  <button class="qty-btn" onClick={() => incLine(l.drink_id, -1)} aria-label="weniger">
+                  <button class="qty-btn" onClick={() => incPfandReturns(-1)} aria-label="weniger">
                     −
                   </button>
-                  <span>{l.qty}× {d.name}</span>
-                  <button class="qty-btn" onClick={() => incLine(l.drink_id, 1)} aria-label="mehr">
+                  <span>{pfandReturns}× Pfand zurück</span>
+                  <button class="qty-btn" onClick={() => incPfandReturns(1)} aria-label="mehr">
                     +
                   </button>
                 </div>
-                <span>{formatCents(d.price_cents * l.qty)}</span>
+                <span>{formatCents(-bar.pfand_cents * pfandReturns)}</span>
               </div>
-            );
-          })}
-          {bar.pfand_cents > 0 && pfandCount > 0 && (
-            <div class="cart-line pfand">
-              <span>{pfandCount}× Pfand</span>
-              <span>{formatCents(bar.pfand_cents * pfandCount)}</span>
-            </div>
-          )}
-          {pfandReturns > 0 && (
-            <div class="cart-line return">
-              <div class="cart-line-label">
-                <button class="qty-btn" onClick={() => incPfandReturns(-1)} aria-label="weniger">
-                  −
-                </button>
-                <span>{pfandReturns}× Pfand zurück</span>
-                <button class="qty-btn" onClick={() => incPfandReturns(1)} aria-label="mehr">
-                  +
-                </button>
-              </div>
-              <span>{formatCents(-bar.pfand_cents * pfandReturns)}</span>
-            </div>
-          )}
+            )}
+          </div>
         </div>
         <div class={`cart-total ${total < 0 ? 'negative' : ''}`}>
           {formatCents(total)}