How to fix display: inline-flex scaling problem?

Question

I have a problem with that scaling of :after when text in button is longer than one line. It's the business of display: inline-flex. Does anyone know how to solve this problem? Small width of div box is necessary. Please help.

.box {
    width: 300px
}

.button {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    display: inline-flex;
    padding: 5px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid #004FA3;
    min-width: 135px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}

.button::after {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    min-height: 21px;
    background-image: url(https://svgshare.com/i/HJM.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: right;
    margin-left: 13px;
}

<div class="box">
  <a class="button">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </a>
  <hr>
  <a class="button">
    Lorem ipsum 
  </a>
</div>

I think you need to use position:absolute for AFTER.Using ABSOLUTE 100% is solve. — Himanshu Vaghela, Jan 15 '20 at 08:37
no need position:absoluite. add flex-shrink:0 to the pseudo element — Temani Afif, Jan 15 '20 at 10:02

score 0 · Accepted Answer · answered Jan 15 '20 at 08:37

Try to use position: absolute. Code that I've added to yours code:

.button {
    position: relative;
    padding-right: 40px;
}

.button::after {
    position: absolute;
    right: 20px;
}

*Note that eg. padding-right should be after yours padding, otherwise it will be overwritten

score 0 · Answer 2 · answered Jan 15 '20 at 08:40

You need to add position ABSOLUTE to your AFTER and add position RELATIVE to your BUTTON.

I update your code. Let me if this helps you or not.

.box {
    width: 300px
}

.button {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    display: inline-flex;
    padding: 5px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid #004FA3;
    min-width: 135px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    position:relative;
}

.button::after {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    min-height: 21px;
    background-image: url(https://svgshare.com/i/HJM.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: right;
    margin-left: 13px;
    position: absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    right:10px;
}

<div class="box">
  <a class="button">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </a>
  <hr>
  <a class="button">
    Lorem ipsum 
  </a>
</div>

How to fix display: inline-flex scaling problem?

2 Answers2