Why does whitespace-nowrap fixes an unexpected line break between an emoji and the text?

I solved this by adding whitespace-nowrap to the <p> tag, but I don't understand why this was necessary. I thought that because I used flex, the container would automatically adjust its size to fit the content, so there shouldn't have been a line break between the emoji and the text. What am I missing?

const Navbar = () => {
  return (
    <div className="w-full flex justify-between">
      <p className="lg:text-6xl md:text-4xl sm:text-2xl text-black dark:text-white">
        🕮Readit
      </p>
      <nav className="w-full flex items-center justify-center lg:text-2xl md:text-xl sm:text-lg">
        <ul className="flex space-x-4">
          <li>
            <a href="#" className="text-black dark:text-white">
              Home
            </a>
          </li>
          <li>
            <a href="#" className="text-black dark:text-white">
              About
            </a>
          </li>
          <li>
            <a href="#" className="text-black dark:text-white">
              Contact
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Navbar;

Typically the flex justify-between classes would allow for both of your elements to fit on one line as each element would take up only the required space necessary.

However in your case you have also applied w-full to your nav element which is making it attempt to take as much space as possible, removing this w-full also allows both parts of your p tag to fit on one line in your example without the need of whitespace-nowrap.

The reason adding thewhitespace-nowrap class works in your example is because it is ensuring your p element gets to take up as much space as it requires even though the nav is attempting to take up all of the space.