Почему переполненные изгибы показаны в фиолетовых полосах? ⇐ Html

[Anonymous]

Я узнаю больше об инспекторе Flexbox в Chrome. Насколько я понимаю, когда я наводняю на гибкий контейнер в инспекторе, фиолетовые полосы указывают на доступное пространство в контейнере изгиба. Итак, если у меня есть приведенный ниже код < /p>

Код: Выделить всё

.flex-container {
width: 70%;
max-width: 60rem;
border: 5px solid #000;
padding: 2em;
display:flex;
}< /code>

First flex item
First flex item
< /code>
< /div>
< /div>
< /p>
Фиолетовая полоса ниже-это доступное пространство после того, как первые два элемента заложены в их максимальном контенте, и где гибкий рост может сделать элементы гибкого ребенка. src = "https://i.sstatic.net/4gvli.png"/> 
Теперь рассматривайте SVG и текст как элементы гибкого. Я намеренно удалил ширину и высоту для svg < /p>


.btn {
display: inline-flex;
align-items: center;
cursor: pointer;
text-decoration: none;
padding: 0 .5em 0 0;
color: black;
background: white;
border: 2px solid black;
margin: 1em;
}

.btn:hover,
.btn:focus {
background: black;
color: white;
}

.btn .icon {
display: block;
/* width: 40px; */
/*height: 40px; */
background: white;
padding: .25em;
margin-right: .5em;
}

В этом случае фиолетовый полоска находится вне гибкого контейнера
ptps://i.sstatic.net.net/6xp.png "/pr>. Потому что SVG берет всю ширину и, следовательно, не дает места для текстового изгиба, и ширина или ширина на .icon решат проблему. Но я не понимаю, почему Chrome показывает это в фиолетовых полосах, указывающих на его свободное положительное пространство, хотя на самом деле это просто пространство, переполняющее гибкий контейнер. Я имею в виду, что если я применяю гибкий рост на какие-либо из предметов сгиба до ребенка, это не так, как будто они займут это пространство.>

Подробнее здесь: https://stackoverflow.com/questions/782 ... le-stripes