Variable width items inside an overflow-x container

I'm searching for a solution to create a vertical navigation list that can accommodate elements wider than the container itself. Since users have the freedom to input any names for the items, I cannot predict their width, except maybe by setting a very high maximum character length.

After experimenting with various methods, I've realized that I keep getting multiple incorrect results - once using flexbox and once without. In both scenarios, when there is an element that overflows outside of the nav container, it causes issues if the user scrolls to the right, revealing that the item boundaries do not extend properly.

If I attempt to style the outer "item" (light blue), all items end up being the same width but fall short of accounting for the overflow. Alternatively, styling the inner item (green) results in the correct width only for the overflowing item, while the others vary in width based on their content length.

Is there a way to:

  1. Ensure all items appear to be the same width even with a large overflowing item
  2. Achieve this without setting a fixed width due to unpredictable user input lengths
  3. Limit the solution to CSS only, avoiding the use of JavaScript

Initial View, appears fine...

Scrolling to the right... looks messy!

Codepen Link

Feel free to explore the Codepen demonstration

HTML Structure

<div id="container">
    <div class="item"><span>Item 1</span></div>
    <div class="item"><span>Item 2</span></div>
    <div class="item"><span>Item 3</span></div>
    <div class="item"><span>Item 4</span></div>
    <div class="item"><span>Super Long Item Name of Obliteration</span>
    </div>
</div>

<div id="flex-container">
  <span class="flex-item"><span>Item 1</span></span>
    <span class="flex-item"><span>Item 2</span></span>
    <span class="flex-item"><span>Item 3</span></span>
    <span class="flex-item"><span>Item 4</span></span>
    <span class="flex-item"><span>Super Long Item Name of Obliteration</span>
    </span>
</div>

CSS Styles

#container {
  width:200px;
  height:400px;
  background-color: red;
  overflow:auto;
}

.item {
  height: 40px;
  border: 1px solid blue;
  background-color:lightblue;
  white-space: nowrap;
}

#flex-container {
  width:200px;
  height:400px;
  background-color: red;
  overflow:auto;
  display: flex;
  flex-direction:column;
}

.flex-item {
  height: 40px;
  border: 1px solid blue;
  background-color:lightblue;
  white-space: nowrap;  
}

/* Content */
span > span,
div > span {
  background-color: green;
}

Answer №1

Learn how to use overflow and text-overflow in CSS

.item,
.flex-item {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}

Check out this Codepen example

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

How can I apply CSS properties to a div class by targeting another child div class?

When the div class dhx_list_item dhx_list_day_events_item is present, I need to apply the following CSS: .dhx_view .day_events .dhx_scroll_cont:first-of-type:before { //some code here } Please see the attachment for reference. ...

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

The functionality of jQuery's .hide method is not effective in this specific scenario

HTML section <div class="navigation-bar"></div> Jquery & JavaScript section function hideUserDiv(){ $('.ask-user').hide(); } var ask = '<div id="ask-user" style="block;position:absolute;height:auto;bottom:0;top ...

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

My HTML includes a <select> element: <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ...

Responsive design is achieved through the use of CSS media queries targeting the

Could someone please clarify the meaning of the following value? Does it indicate that the output device must support exactly 256 colors, or is it acceptable for the output device to have 256 colors or fewer, or does the device need to support 256 colors ...

Please explain the steps for creating a responsive grid layout

*{ margin: 0; margin-bottom: 200px; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } .grid-container { position:relative; display: inline-grid; grid-template-col ...

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

I'm experiencing a strange issue that I can't quite figure out. To demonstrate the problem, I've created a fiddle. What's puzzling me is why applying a border to one of the three canvases causes my other two .headerMainDiv elements to ...

How can I make one background image extend beyond the grid when there are two background images?

I am currently working on a website design using the 960 grid system and a responsive framework called 'skeleton'. Everything is running smoothly, but I have encountered a problem with the header banner. Since it is only 960px wide, there are whi ...

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

Using jQuery to make a PNG image draggable and allow it to overlap with

Can jQuery's Draggable be used with an overlapping PNG image (not as a background image, but for printing purposes)? I attempted using the CSS style "pointer-events: none," however this solution does not function correctly in Internet Explorer. <d ...

Registration form creation with file input type resulting in a database storing null values

When submitting my registration form, all entered values except the input type=file are being saved in the database. The file input returns a null value of "0" in the database, even though a file path is chosen from the desktop. I'm trying to figure o ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

Ways to implement CSS in my JQuery Plugin

In the process of creating a unique JQuery component plugin that relies on some essential default CSS for its layout, I am faced with a dilemma. Should I: Create a separate .css file and load it dynamically within my plugin code (How would this be accomp ...

Capture input before onChange and ideally only accept numerical values

Preparing for inexperienced users, I have a table of input fields. My goal is to enhance user experience and make the form as user-friendly as possible. I have developed code that highlights the table row immediately after an input field has changed. Howe ...

Prevent elements from overlapping within a flexbox container

I've encountered an issue with resizing the window causing the logos to overlap the portrait image. Is there a way to fix the logos relative to the portrait? Below is the code: /* Defaults for Main Part of Pages */ body, div, h1, p { margin: 0; ...

What is the best method for swapping out an iframe with a div using Javascript?

Having an issue with loading an external HTML page into an iFrame on my website. Currently facing two main problems: The height of the iFrame is fixed, but I need it to adjust based on the content's height. The content inside the iFrame does not inh ...

Arrangement of multiple boxes in a single row using HTML code

Struggling to solve this supposedly simple problem, I'm reaching out for help. I need assistance in arranging multiple inputs with corresponding labels, all stacked horizontally on a single line as shown in the image. ...

What steps are involved in creating a mobile web app using Visual Studio 2012, jQuery, and ASP.NET MVC?

As a beginner in asp.net, I am tasked with creating a mobile web app project. Before diving into development, I would like to first focus on designing my app. Can anyone provide guidance on how I can achieve this? Any help is appreciated. ...

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...