What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar.

Instead of using the 'display: inline-block' property because it creates unwanted white spaces between the sub-containers.

Here is my solution:

.main-container{
  width:250px;
  overflow-x:auto;
  height:100px;
  white-space: nowrap; 
}

.sub-container{
  width:250px;
  height:100px;
  float:left;
  border:1px solid red;
  box-sizing:border-box;
}
<div class="main-container">
  <div class="sub-container">Sub-container 1</div>
  <div class="sub-container">Sub-container 2</div>
  <div class="sub-container">Sub-container 3</div>
  <div class="sub-container">Sub-container 4</div>
</div>

htmlcss

Answer №1

Implement flexbox for optimal layout

.parent {
  margin: 1em auto;
  overflow-x: auto;
  width: 250px;
  white-space: nowrap;
  display: flex;
  border: 1px solid blue;
}
.children {
  flex: 0 0 250px;
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
}
<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>

Answer №2

replace float with display:inline-block

.children{
  width:250px;
  height:100px;
  /*float:left;*/
  display:inline-block;
  border:1px solid red;
  box-sizing:border-box;
}

Answer №3

Utilizing the table-cell property

.container {
  margin: 1em auto;
  overflow-x: auto;
  width: 250px;
  border: 1px solid blue;
}
.item {
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  display: table-cell;
}
.item::before {
  content:'';
  display:block;
  width: 250px;
}
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</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

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

My target XHTML document structure is as follows: <html> <head> </head> <body> <span class="boris"> </span> <span class="boris"> </span> <span class="johnson"> </span> </body> </html> ...

htmlxmlxhtmlxpath

Having trouble with jQuery and Ajax POST requests

I designed a basic html page and utilized jquery/ajax to transmit a simple json file to my php server. The behavior of my code is quite puzzling. Initially, I followed suggestions from other Stack Overflow queries: Script1 var data = {"deviceUUID":"ab ...

jqueryhtmlajaxposthttp-post

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Assigning binary messages a structure similar to JSON for the purpose of easy identification

Is there a way to differentiate binary messages from a server by tagging them with a type attribute? Currently, I am working with node.js and sending binary images as blobs to my client. However, I now also need to send other file types like .txt over the ...

javascriptjsonhtmlnode.jsbinary

How can SQL data be loaded following the selection from a dropdown menu?

I have a pressing query that I need assistance with. I am aiming to achieve a certain task, but due to lack of prior experience in this area, I am unsure about how to proceed. My current situation involves populating a dropdown menu with names retrieved f ...

javascriptphphtmlmysqlsql

Stream music from SoundCloud by simply clicking a button on an external source, no need

My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...

jqueryhtmlwordpressiframesoundcloud

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

I need the popover width to always match the width of the select component, regardless of the length of the text in the menu items. Setting autoWidth to either true or false is not providing a solution. Below is the code for the select component: import ...

cssreactjswidthmaterial-uihtml-select

How to access a webpage on your Android device without the address bar visible

My question relates to sending Push Notifications through OneSignal. Upon clicking a push notification, it automatically redirects the user to my website. Is there a way to hide the address bar on the browser when this happens? I attempted using the follo ...

javascriptandroidjqueryhtmlweb

Tips on personalizing buttons within Telerik form or Kendo form

Having recently started working with Telerik UI, I am struggling to customize a Kendo form in ASP.NET Razor Pages. Specifically, I am trying to rename a button but cannot locate the button field within the code. Despite following the guidelines provided in ...

c#htmlasp.net-mvc-3kendo-uitelerik-grid

Send HTML table information from view to Controller action in ASP.NET Core by converting it to a list

Encountering issues with null values in the controller action method, preventing table data rows from being looped through. Model: class: public class Generation { public int Generation1Count { get; set; } public int Generation1TotalS ...

htmljqueryasp.netasp.net-mvchtml-table

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

javascripthtmlcss

What is the best way to center a grid item in Material-UI within a React application?

I'm struggling with centering a grid element in MUI v5 and aligning a long paragraph to the left side while adding horizontal margin for big screens. Can anyone help me out with this? Thank you. <Box style={{ backgroundColor:" ...

cssreactjsmaterial-ui

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Help needed! I'm encountering an issue where mysterious "L" characters are appearing in IE 8. The problem is specifically occurring in the Healthcare Professionals section and the bottom two blocks of the page. Has anyone else experienced this or have ...

htmlcssinternet-explorer-8

Filling a table cell with a div that spans 100% height

I am currently working with Bootstrap and I am attempting to create three columns filled with text overlaying a rectangle. The squares within the columns should have equal height and there needs to be spacing between them. Through the use of display:table ...

htmlcsstwitter-bootstrap

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

javascripthtmlcssdrop-down-menustandards

What is the best method for creating a fade effect on a div background?

I am trying to animate a div with the id #test from a 0 opacity background to an opacity of 0.7 using CSS rgba values, but for some reason, the .animate function is not working as expected. Here is my CSS: #test { background-color: rgba(0, 0, 0, 0); ...

javascriptjquerycssjquery-animateopacity

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

htmlcssfont-face

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...

javascriptajaxhtmlgoogle-chromecors

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...

javascripthtmlcssreactjsmaterial-ui