How do I prevent the last element in a Flex container from being wrapped?
#navbar { display: flex; flex-flow: row wrap; gap: 10px; margin-bottom: 20px; height: 50px; align-items: center; overflow: hidden;}.nav-button { padding: 10px 20px; background-color: #4CAF50; color: white; cursor: pointer; border-radius: 5px;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex Toggle Navbar</title><link rel="stylesheet" href="styles.css"></head><body><!-- Navigation Bar --><div id="navbar"><button class="nav-button">Section 1</button><button class="nav-button">Section 2</button><button class="nav-button">Section 3</button><button class="nav-button menu-icon">Section 4</button></div></body></html>Here the 'Section 4' element should not be wrapped. Is it possible with flex?