Odd flex items behavior

Asked Jan 29 '21 at 08:07

Active Jan 29 '21 at 11:09

Viewed 19 times

Could someone explain to me this strange behavior?

.wrapper {
  width: 500px;
}
.container {
  background: blue;
  flex-direction: row;
  padding: 10px;
  display: flex;
  margin-bottom: 10px;
}

a {
  margin-left: 10px;
  background: pink;
  align-self: start;
}
#title {
  font-size: 21px;
  line-height: 28px;
}

<div class="wrapper">
  <div class="container">
    <a id="title" href="#">Deserunt exercitationem exercitationem.</a>
    <a href="#">Test</a>
  </div>
  <div class="container">
    <a id="title" href="#">Deserunt autem non voluptatem velit exercitationem.</a>
    <a href="#">Test</a>
  </div>
</div>

https://codepen.io/rgdgu8uz2llu/pen/VwmwjLa

Why is the flex item #title in the second row so stretched, while in the first row as I expect? How do I make #title width fit to content, as inline?

Is there any way to fix it?

Thanks!

edited Jan 29 '21 at 11:09

skolind

1,724
6
28
51

asked Jan 29 '21 at 08:07

rgdgu8uz2llu

1

Your code works as expected according to its css rules. Add rule `flex: 1` to `#title`. – s.kuznetsov Jan 29 '21 at 08:11
you cannot fix this, – Temani Afif Jan 29 '21 at 08:13
no, you dont understand - i need width of #title in a second row without any additional space at right – rgdgu8uz2llu Jan 29 '21 at 08:15
@rgdgu8uz2llu, Do you want to move word "**exercitationem**" to a new line? – s.kuznetsov Jan 29 '21 at 08:18

Odd flex items behavior

0 Answers0