如何让Flex元素点击后不拉伸？CSS技术问题求助

我是CSS新手，现有三个div元素，初始状态如下：

问题在于，点击中间的盒子时，该盒子会变大，另外两个盒子也会随之变大：

我希望盒子初始状态及点击后都保持相同尺寸，盒子变大的原因是添加了"arrow-icon"。我已尝试设置min-width和max-width，但盒子仍会被拉伸，只想让它们在添加图标后保持相同宽度。

相关代码 #

HTML

<section class='modes-flex__options'>
    <div class='options'>
        <h2 class='options__title'>Options</h2>

        <div class='options__item-container'id='1v1' onClick="selectedGameOption(this.id)">
            <h3 class='options__item'>Player vs AI (1 v 1) </h3>
            <div class='arrow-icon__div'>
                <i></i>
            </div>
        </div>

        <div class='options__item-container' id='1v1-tourny' onClick="selectedGameOption(this.id)">
            <h3 class='options__item'>Player vs AI (Tournament)</h3>
            <div class='arrow-icon__div'>
                <i></i>
            </div>
        </div>
        <div class='options__item-container' id='ai-v-ai-tourny' onClick="selectedGameOption(this.id)">
            <h3 class='options__item' >AI vs AI (Tournament)</h3>
            <div class='arrow-icon__div'>
                <i></i>
            </div>
        </div>
    </div>
</section>

CSS

.modes-flex{
    display: flex;
    margin-top: 3rem;

    &__options{
        flex:1;
        display: flex;
        justify-content: end;
    }

    &__description{
        flex:1;
        display: flex;
        flex-direction: column;
    }
}

.options{
    margin-right: 5rem;

    &__title{
        font-size: 1.2rem;
        padding-bottom:2rem;
    }
    &__item{
        flex: 1;
        padding-right: 5rem;
    }
}

.description{

    &__title{
        font-size: 1.2rem;
        padding-bottom:2rem;
    }
}

.options__item-container {
    padding: 1.5rem 1rem 1.5rem 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 10px lightgrey;
    border: 1px solid lightgrey;
    display: flex;
    align-items: center;

    &:hover{
        cursor: pointer;
    }

}

.arrow-icon__div{
    text-align: right;
}

.active-option{
    background-color: $dark-navy;
    color: white;
    
}

解决方案 #

问题根源

.options__item-container作为flex容器，其父元素.options未设置固定宽度，加上.options__item设置了flex:1，当添加图标后容器内容宽度变化，会触发整个flex容器宽度拉伸，进而影响所有同层级盒子。

具体修复步骤

1. 给.options设置固定宽度，锁定父容器尺寸：

.options{
    margin-right: 5rem;
    width: 420px; /* 根据实际需求调整合适宽度 */
}

如果希望宽度自适应最长内容，也可以用width: fit-content;（注意兼容性）。

2. 让.options__item-container占满父元素宽度，避免内容影响容器尺寸：

.options__item-container {
    padding: 1.5rem 1rem 1.5rem 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 10px lightgrey;
    border: 1px solid lightgrey;
    display: flex;
    align-items: center;
    width: 100%; /* 强制占满父容器宽度 */
}

3. 固定图标容器宽度，防止其改变布局：

.arrow-icon__div{
    text-align: right;
    width: 28px; /* 设置图标容器固定宽度 */
    flex-shrink: 0; /* 禁止图标容器被压缩 */
}

另外检查箭头图标是否有额外的padding/margin，若有需统一设置，避免影响整体宽度。

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