Question

我有一个通用的灵活容器，我用于我的网站，有一个固定宽度的侧边栏和一个随窗口一起增长的主要内容区域。当主区域只有文本时，这可以正常工作，但如果将太大的图像插入到内容中，该区域将扩展到包含div之外。我怎样才能使图像大小调整以适应flex-main容器？这是我的CSS代码：

.generic-flex-container
{
    display: flex;
    margin: auto;
    margin-bottom: 50px;
    max-width: 1280px;
    overflow: hidden;
    width: 90%;

    .flex-main
    {
        flex: 1 1;
        padding-right: 20px;
    }

    .flex-sidebar
    {
        border-left: 1px solid lightgrey;
        flex: 0 0 300px;
        padding-left: 20px;
    }
}

Answer 1

设置min-width: 0;或其他适当的值。此外，任何要缩小的元素容器都需要减少min-width。

不要忘记flex-shrink

Flex子容器在有大图像时溢出容器

1 个答案: