Как настроить ширину дочернего элемента flex-box относительно ширины его flex-box

Question

Извините, если вы не можете понять мой вопрос. Я работаю над проектом «камень-ножницы-бумага», в котором пользователь играет в игру против компьютера. Вы можете проверить https://coderoo7.github.io/rockPaperScissor/ Теперь, когда пользователь выбирает какой-либо параметр (камень, бумага или ножницы), компьютер показывает его выбор (камень или бумага или ножницы). Но показывает свой выбор, поскольку изображение кажется больше по размеру, чем изображения на левой стороне (вид пользователя).

Как сделать так, чтобы изображения отображались на обеих сторонах одинакового размера, они дети класса flexbox.

<section id="player">
                    <div class="score">
                        <h2>Your Score</h2>
                        <span class="scoreDisplay">0</span>
                    </div>
                    <div class="itemSelection">
                        <button class="btn" value="rock"><img src="img/rock.svg" alt=""></button>
                        <button class="btn" value="paper"><img src="img/paper.svg" alt=""></button>
                        <button class="btn" value="scissors"><img src="img/scissors.svg" alt=""></button>
                    </div>
                </section>
 <section id="computer">
                    <div class="score">
                        <h2>Computer Score</h2>
                        <span class="scoreDisplay">0</span>
                    </div>
                    <div class="itemInsert">
                     here I insert image(rock,paper or scissor) using JavaScript. But size of image is bigger than in "itemSelection" class. 
                    </div>
 </section>

Для справки вы можете проверить мой код с помощью элемента inspect. И играть в игру в мобильном режиме, тогда вы сможете понять, что я пытаюсь сказать ...

Answer 1

В мобильном представлении, изучив размеры изображений в классе .itemSelection, они имеют высоту 39.33px, что означает, что вы можете решить эту проблему с помощью

1. добавление класса pc-selection к изображению, находящемуся внутри класса .itemInsert,

<div class="itemInsert">
    <img class="pc-selection">
</div>

2. добавить медиазапрос для класса .pc-selection,

@media only screen and (max-width: 320px) {
  img.pc-selection {
    height: 39.33px;
  }
}

Answer 2

Это потому, что элементы width установлены в процентах (70%), поэтому, когда у вас есть 3 элемента в 1 контейнере, каждый элемент получит 1/3 всего пространства контейнера, но в другом контейнере вытолько получил 1 элемент, чем его занимает все пространство (ну 70% от него).

Быстрое решение проблемы - добавить еще 2 элемента, но скрыть их, чтобы видимый элемент занимал 1/3 пространства контейнера так же, как и другие элементы в первом контейнере.