0

I have a problem. Whenever the text-wraps the h1 stays the original size making the icon float with quite some space on the right of the h1. What I would like is that the icon will always be directly next to the text even if the text wraps on a new line. Is this possible? To show what I mean you would have to switch your browser to responsive mode and resize the screen.

.container {
  display: flex;
  flex-direction: row;
}
<div class="container">
  <h1>This is a long text for testing!</h1>
  <i class="icon">icon</i>
</div>

Without spacing

Twoez
  • 540
  • 1
  • 5
  • 17

2 Answers2

0

With flexbox, the .container does not know when the content of flex-items it holds have wrapped. See this answer for a good explanation about this.
Depending on your exact requirement, a solution here could be to do this without flex. You could just have the icon within the <h1> tag and resize it as required. See the code below. You can change the font-size of the .icon class and adjust its position vertically with some padding/margin if required.

.container {
  display: flex;
  flex-direction: row;
}

.icon { 
  font-size: 12px;
}
<div class="container">
  <h1>This is a long text for testing!<i class="icon">icon</i></h1>
  
</div>
veesar
  • 422
  • 3
  • 11
0

Late to the party, but setting flex shrink to 0 fixes this I believe. The container its in is a flex container, meaning the items within it are flex items. Each one of these items has a shrink/grow/basis value. setting shrink to 0, stops its from doing what it defaults to (becoming smaller as the container space reduces).

Gennadiy Mostovskiy
  • 1
  • 2