[swiper.js@11]display:flex;の中に入れたらswiper.jsの幅が壊れるので注意する話

WEB

2025.03.19

width: 0;

症例

例えばこういう場合。

<div class="wrap">
    <div class="main">
        <div class="swiper"> ～ </div>
    </div>
    <div class="sub"></div>
</div>

.wrap{
    display: flex;
    flex-direction: row;
    .main{
        flex: 1;
    }
    .sub{
        width: 200px;
    }
}

swiper.jsがflexの子要素に入っていた場合。

.swiperに実数を入れない限り、.swiperの幅がめっちゃ伸びる。
ブラウザ幅を突き破って、めっちゃ長くなる。

ダメやんけ、となる。

.wrap{
    display: flex;
    flex-direction: row;
    .main{
        flex: 1;
        width: 0;
    }
    .sub{
        width: 200px;
    }
}

親要素にwidth: 0;を入れると治まる。

良かったですね。