Flex items are overflowing, rather than adjusting their size

Here

.header  {
  display: flex;
  font-family: monospace;
  background: papayawhip;
  align-items: center;
  justify-content: space-between;
  margin-left: auto; 
}

ul {
  display: flex;
  background: papayawhip;
  gap: 10em;
  list-style-type: none;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

Intended Outcome

Although my header visually resembles the desired outcome, when I reduce the size of the page, the right links/ul (child items) end up overflowing beyond the header (parent).

I suspect that this issue may be related to incorrect flex settings. Could it be a problem with the flex-basis? Or perhaps the interaction between flex-shrink and flex-basis?

I have researched flex settings and attempted to individually add "flex: 1;" to both the parent .header as well as the div.right-links and ul.

I also experimented with creating a separate div... div.header and applying flex: 1 to it in hopes of allowing the parent to expand when the window is resized. However, this did not yield any results.

I find myself perplexed because with "display: flex" on both the .header element and the ul, indicating a flex-shrink value of 1 (flex = 0, 1, auto), shouldn't the links shrink when the parent element resizes rather than overflowing?

I am seeking some guidance or discussion as I have reached a point where I am simply adding code to "experiment", which indicates that I am in need of assistance. Thank you in advance!

Answer №1

By default, the ul element has a padding of 26px which causes the div to be pushed to the right when the viewport is narrowed. Removing the padding-left property will eliminate this issue. Additionally, setting the display type of li to inline-block prevents the padding on the a element from overflowing the logo on smaller screens. For very small screen sizes (below 612px), all elements including the logo, links, gaps, and padding will adjust accordingly. To further customize the styling at different screen sizes, consider using a media query.

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  background: papayawhip;
  padding: 5px;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  padding-left: 0;
  display: flex;
  gap: 1em;
  flex-direction: row;
  list-style-type: none; /* removes dots on list items */
}

li {
  display: inline-block;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  text-decoration: none; /* removes line under links */
}
<div class="header">
  <div class="left-links">
    <ul>
      <li><a href="#">ONE</a></li>
      <li><a href="#">TWO</a></li>
      <li><a href="#">THREE</a></li>
    </ul>
  </div>

  <div class="logo">LOGO</div>
  <div class="right-links">
    <ul>
      <li><a href="#">FOUR</a></li>
      <li><a href="#">FIVE</a></li>
      <li><a href="#">SIX</a></li>
    </ul>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

The sticky navbar fails to stay in place when the content becomes too lengthy

This is my current state of code (minified, for explanation only) index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component: Vue.component('list-category', { template: "#lc", props: ['data', 'category', 'search'], data() { return { open: false, categoryId: this.category ...

How to center elements vertically in a navbar using Bootstrap 5

I am currently utilizing bootstrap to design a navbar featuring various links. One of these links is a button, which is causing alignment issues with the rest of the links. body{ background: rgb(27, 25, 25); } .btn{ border-radius: 3em; } ...

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

Tips for increasing the size of Material-ui Rating icons

I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too ...

Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code snippet: .navi ul li { float:left; list-style-type: none; border-right: 1px solid #c0c0c0; margin:0px 0 0 0; } .navi ul li:last-child { border:none; } .navi ul li a { display:block; margin:0 20px; text-dec ...

Attempting to decipher the @media queries CSS code responsible for the slider on this particular website

I'm having trouble with the cover not fully expanding when the browser size is less than 750. I am new to using bootstrap. For reference, I am looking at this website: CSS .slide-wrapper { position: relative; } /* Not using now .carousel-caption ...

Eliminating the background color upon clicking

Here is the link structure I have set up: <ul> <li><a href="home.html"><span>home</span></a></li> </ul> However, when I click on the link, a shadow appears. I would like the link to appea ...

Trouble Ensues as CSS Div Refuses to Center

I'm in the process of creating a practice website to improve my HTML and CSS skills, but I'm having trouble centering a specific div. I've attempted to use margin: 0 auto, but it doesn't seem to affect the positioning of the div at all. ...

Tips for keeping divs in place when hovering over a changing-sized element above them

Looking for some help with my website design. Whenever I hover over the "Problem" and then move away, the div underneath it shifts up and down. The same issue occurs when interacting with the "Solution" section. Any suggestions on how to prevent this movem ...

Creating a responsive and expandable table using HTML and JavaScript

I need help with making my html table resizable in a vertical direction. The cells can overflow if there isn't enough space, so I want to allow users to stretch the table by dragging and extending the bottom edge. Can anyone provide guidance on how to ...

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...