如何使flex元素不能在单击时增长？

Question

狂热者谁真的很烂的css。

我有以下三个数字：

​

​

问题是，当我单击中间的一个时，盒子就会增长，另外两个盒子也会增长：

​

我如何使盒子开始和保持相同的大小，即使在点击后。框增长的原因是要添加“箭头图标”。

代码如下: 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;
    
}

尝试设置最小和最大宽度，但仍在增长，只是希望它们在添加图标后保持均匀宽度。

Answer 1

你说过：The reason the box is growing is do to adding the "arrow-icon"。

在我的经验中，在这些情况下，我总是添加到框的默认大小，以便当添加另一个元素(即arrow-icon)时，它不会更改大小。(因为框中有足够的空间来添加arrow-icon )。通过这样做，所有的盒子都可以通过任何行动保持不变。