Weird nextline problem when resizing

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hi,

First the codepen: https://codepen.io/johnthecoder/pen/YzKGyOZ

Next, the problem: to make the problem appears try to resize the code window to the right then go to the left. One word of the h1 might have gone next line but if you go to the right again it cames back to normal.

Any idea why ?

Don’t know why reflow is being triggered like that. It should happen when the width is to narrow for the h1. I don’t understand your application of flexbox. If you want a header that goes across the top of the screen, it makes no sense to me that your flex-direction would be column. It’s the row direction. Your h1 shouldn’t be in nav. When I removed it, it stopped do that (I also changed the direction to row). The way I see it is there is a header with two children h1.logo and nav. Flex-direction is row with space-between.

reason for that u type > [Saints‑en‑Puisaye]< html think that is one word no space between words
Anyway i check your code and you are on wrong way