Тема: Чому через ширину інпута діви починають вилазити по вертикалі?
<style type="text/css">
.block {
width: 100%;
height: 30px;
border-radius: 3px;
}
.block-inactive {
border: 1px solid rgba(150,150,150,1);
}
.outer {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.tag-ready {
border-radius: 3px;
padding: 3px 5px;
margin: 6px 3px;
background-color: rgba(150,150,150,1);
}
.tag-input {
border-radius: 3px;
margin: 3px 3px;
width: 100%;
}
</style>
<div id=tags class="outer block block-inactive">
<div class="tag-ready"><img width=10 height=10 src="close.png" />cpp</div>
<div class="tag-ready"><img width=10 height=10 src="close.png" />c#</div>
<div class="tag-ready"><img width=10 height=10 src="close.png" />asp.net</div>
<input type="text" class="tag-input"/>
</div>
Чому додавання/прибирання width: 100% для tag-input так змінює результат? І як ціього уникнути?