Ширина гибкого контейнера ведет себя по -разному в 2 случаях ⇐ CSS

[Anonymous]

Привет, я новичок в Flexbox .. У меня был запрос. Его ширина растет по мере увеличения ширины видового порта. < /P>











< /code>
CSS для вышеуказанного html < /p>
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}

.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}

< /code>
Во втором случае существует входной контейнер, который представляет собой гибкий контейнер, который находится внутри родительского гибкого контейнера, но его ширина не растет и фиксируется при изменении ширины вида. /p>


Enter the decimal number



< /code>
css для вышеуказанного. < /p>
main{
display:flex;
align-items: center;
flex-direction: column;
}
#input-container{
display:flex;
flex-direction: row;
flex-wrap:wrap;
max-width: 500px;
margin:0 auto;
justify-content: center;;
}
< /code>
Мне было интересно, почему это происходит. Я новичок в обучении Flexbox. Приносим извинения, если это глупый вопрос. Спасибо Advance!

Подробнее здесь: https://stackoverflow.com/questions/794 ... in-2-cases