1

My React code:

<InfoWrapper>
  <InfoCircle>
    <span>i</span>
  </InfoCircle>
  <span className="info-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    elit.
  </span>
</InfoWrapper>

This renders correctly like this:

single-line rendering

The information circle has a size of 28x28.

But if I add more text so that the span expands to multiple lines, the size of the info circle turns into 16.5x28:

multi-line rendering

I don't have any shrinking rule set and on InfoWrapper, since I set align-items to flex-start so that items won't stretch vertically.

Here's a snippet with the code in full:

span {
  font-size: 0.875rem;
}


.info-wrapper {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  margin-top: 1.25rem;
 }

.info-circle {
  align-items: center;
  background-color: #f5f7ff;
  border-radius: 0.875rem;
  display: flex;
  flex-flow: row nowrap;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.info-label {
  font-size: 0.9375rem;
  margin-left: 0.5rem;
}
<div class="info-wrapper">
  <div class="info-circle">
    <span>i</span>
  </div>
  <span class="info-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Oct 23 '19 at 14:04
  • 1
    add `flex-shrink: 0;` to that icon – Temani Afif Oct 23 '19 at 14:10
  • Thanks @TemaniAfif and Paulie. I updated the question body with a code snippet – Paul Razvan Berg Oct 23 '19 at 15:22

1 Answers1

-1

You can't set the width to a span element. Span has the attribute of display: inline;. Change it to display: block; or display: inline-block; because width only works for block elements.

Coco Liliace
  • 311
  • 5
  • 14