Bootstrap v4-beta3 Flex布局在Safari 10中失效问题求助

It sounds like you're hitting a well-documented flexbox bug in Safari 10—older versions of Safari had inconsistent handling of flex item heights when using percentage-based flex-basis values. Since you can't debug with dev tools on your device, let's jump straight to targeted fixes that resolve this specific issue:

Recommended Fixes #

1. Convert Cards to Vertical Flex Containers #

Safari 10 fails to properly calculate the height of flex items that contain block-level children. By making each .card a vertical flex container, you force the browser to correctly compute the height of internal elements like .card-body and .card-footer:

.card {
  flex: 0 1 25%; /* Keep your custom flex setting */
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure the card takes full height of its flex row */
}

2. Make Card Body Fill Available Space #

To ensure the card body expands to fill the gap between the image and footer (and prevent content from collapsing), add flex: 1 to .card-body:

.card-body {
  flex: 1;
}

3. Fix Flex Container Height Calculation (Optional) #

If the .card-deck container itself is still having height issues, add min-height: 0 to override Safari 10's default flex container height behavior, which can restrict child element expansion:

.card-deck {
  display: flex;
  flex-wrap: wrap;
  min-height: 0; /* Fixes Safari 10 flex container height clamping */
}

Why This Works #

• Safari 10's flexbox implementation didn't automatically propagate height to flex items with percentage-based flex-basis. By explicitly setting .card to height: 100% and making it a vertical flex container, you force the browser to correctly size all internal elements.
• Using flex: 1 on .card-body ensures it takes up all remaining vertical space in the card, keeping the footer anchored at the bottom and preventing content from collapsing into an incorrect height.

This should match the behavior you see in Safari 11, where these flexbox bugs were addressed in Apple's updates.

内容的提问来源于stack exchange，提问作者DeiForm