How to make left elements unaffected when using display flex

Question

.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:

enter image description here

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:

enter image description here

So is there a way to make the element containing my icon unaffected? Hope to get a solution from you

score 0 · Answer 1 · answered Oct 11 '22 at 01:37

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>

score 0 · Accepted Answer · answered Oct 11 '22 at 01:40

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>

How to make left elements unaffected when using display flex

2 Answers2