How to make left elements unaffected when using display flex [duplicate] - html

Question

This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
.location-text {
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact {
display: flex;
}
.icon-address {
width: 22px;
height: 22px;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="list-contact">
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>
I have a frame like the following and I want to display flex so that they are on one row:
And I wanted the icon and content to be on the same line so I used display flex and it affected the width of the right icon. Here is my HTML and CSS code:
And this is the result I got:
So is there a way to make the element containing my icon unaffected? Hope to get a solution from you

Answer 1

By default, every flex child has flex-shrink: 1 assigned, which cause them to shrink to its minimum content width when there are no enough space.
To counter that, you just need to manually assign it to 0 so it will keep its assigned size which is 22px.
See more about flex-shrink.
.icon-address {
flex-shrink: 0;
}
.location-text {
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact {
display: flex;
}
.icon-address {
width: 22px;
height: 22px;
flex-shrink: 0;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="list-contact">
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>

Answer 2

you just need to put the elements correctly, so that the layout is as expected
.location-text{
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact{
display: flex;
}
.icon-address{
width: 22px;
height: 22px;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
.content-address{
width: 200px
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="list-contact">
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>