MacOS 浏览器压缩内容以适应

Question

我在一些 React 开发中注意到的一点是，MacOS 浏览器试图将所有页面内容塞入视图，而不是简单地允许用户滚动。例如：

function Example()
{
    const Elements = (new Array(5)).fill(<div style={{backgroundColor: 'red', border: '1px solid', height: '100px', width: '100%'}} />)
    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'flex-start',
            overflow: 'auto',
            height: '500px',
            width: '100px',
        }}>
            {Elements}
        </div>
    )
}

在 MacOS 和 Windows 上都能正常显示。但是，当您将 new Array(5) 更改为 new Array(50) 时，只有 Windows 浏览器会按预期显示。 MacOS 上的所有浏览器都试图将 50 个 div 填充到 500px 容器中。

如果我设置 min-height，它将起作用。 但是，当使用 Material-UI 组件时，这会非常令人沮丧 Collapse 或 ExpansionPanels 其中高度是动画的（或者甚至只是其他未指定 min-height 的组件）。为什么只有 MacOS 浏览器会这样做，我如何 fix/get 绕过它而无需手动 animating/setting min-height?

Answer 1

所以我不一定能解释 为什么 MacOS 浏览器会这样做，但我想出了解决方法。在应该滚动而不是压缩的容器（和子容器）上设置 flex-shrink: 0 似乎可以解决问题。我很想知道这是否是 flexbox 错误或功能，或者我是否误解了 flexbox。

MacOS 浏览器压缩内容以适应

MacOS Browsers Squish Content to Fit

css

macos

overflow

reactjs

material-ui