Is there a way to remove extra white space in this flex item?

Question

The space I am referring to is the on the right side of the text(grey)

.icon {
  background: green;
  width: 20px;
  height: 27px;
  flex-shrink: 0;
  margin-right: 10px;
}

a {
  display: flex;
  width: 200px;
  align-items: center;
  background: pink;
  padding: 0 20px;
}

.text {
  background: #ccc;
  min-width: 0;
}

<a href="#">
  <span class="icon"></span>
  <span class="text">Demander un prix au concessionnaire</span>
</a>

no you cannot and this is not related to flexbox (will add another duplicate) — Temani Afif, Apr 11 '19 at 18:34
Ok, because I tried a lot of things and nothing worked, that's that I guess — Huangism, Apr 11 '19 at 18:37
the reason this is happening in the first place is because you set container width to 100%, and image width to static 20px along with margin of 10px. so text is just tying to take up all the space that is left inside the container. — Rachel Nicolas, Apr 11 '19 at 18:37
There is `flex-basis: content;` and other values like `min-content`, but I don't believe they are widely supported yet - [ref](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) — zgood, Apr 11 '19 at 18:38
@RachelNicolas it's not really this, add `br` right after `au` and it will work as excepted — Temani Afif, Apr 11 '19 at 18:40
@RachelNicolas why would the text try to take up space? flex grow is defaulted to 0. You can play around with and set the anchor to 400px then you will see the text is not try to take up space because the grey don't extend — Huangism, Apr 11 '19 at 18:50
The only thing close to solving this is `width: min-content` but it wraps the text strangely even if I ignore the support for it — Huangism, Apr 11 '19 at 18:51
@Huangism yes, it does :) we can't test by setting anchor to 400px since it's more than enough space for text to appear on one line. instead, we can test with 250px. then, the grey box will be 220px (which is exactly 250px-(10margin+20width)). meaning it takes up the space of the anchor. i guess the question here is what you're trying to achieve rather than trying to "hack" the grey box — Rachel Nicolas, Apr 11 '19 at 21:12
@RachelNicolas nvm, I thought you meant the grey box extended beyond its content width. The goal is simple, I want to center the icon and text perfectly whether it wraps or not but this is currently not possible — Huangism, Apr 11 '19 at 22:05
@Huangism is this closer to what you wanted? https://jsfiddle.net/kkuzmina/sw820h7g/9/ — Rachel Nicolas, Apr 12 '19 at 14:16
@RachelNicolas this has the exact same issue, the text and the width of the button was just to demonstrate the issue. But in reality the text and width could be anything, thanks for the effort but don't worry about it, the duplicate explains the essential issue — Huangism, Apr 12 '19 at 14:26

SebastianOpperman · Answer 1 · 2019-04-11T18:30:30.437

0

Try:

.text {
 white-space: pre-line;
}

https://css-tricks.com/almanac/properties/t/text-overflow/

edited Apr 11 '19 at 18:30

answered Apr 11 '19 at 18:29

SebastianOpperman

6,988
6
30
36

the text is just an example and so is the width, it's only there to make this example simple. I need the text to show and centered aligning nicely with the icon – Huangism Apr 11 '19 at 18:30

Is there a way to remove extra white space in this flex item?

1 Answers1