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

Ways to delete a tag with jQuery

Currently I'm struggling with hiding elements like delpc and picnam. Here is the structure of my code: <ul id="userpic" class="user pic"> <im class="pict"/> Picture preview </ul> <div id="showpicname"> <div id= ...

jqueryhtml

Is there a way to line up these two tables or divs using a shared parent header div?

In the process of developing this webpage, I encountered a layout that resembles the following: Here is an approximation of the HTML structure: <div class="title"> <table> <tr> <td width="35%">Table 1a Head ...

htmlcss

Using AngularJS, I can bind the ng-model directive to asynchronously update and retrieve data from

I am currently working with Angular to develop a preferences page. Essentially, I have a field in a mysql table on my server which I want to connect my textbox to using ng-model through an asynchronous xhr request for setting and fetching data. I attempt ...

javascripthtmlangularjsasynchronous

JavaScript code that triggers a function when the mouse is moved over a description box on a

As a beginner in the field of Computer Science, I recently embarked on a project to create a website for sharing science articles with students. The goal is to spark curiosity and interest in science through this platform. One key feature I wanted to inclu ...

javascripthtmlwebonmouseoveronmouseout

What is a method to adjust the height of a paragraph element in AngularJS based on user interaction?

Is there a way to dynamically adjust the height of a paragraph element in Angular when clicking on a "Show More" button? I want the button text to change to "Show Less" and shrink the paragraph back down when clicked again. What would be the most effective ...

javascripthtmlangularjs

What is the best method for transferring data from an Excel spreadsheet into an HTML table?

I need assistance with integrating a dynamic Excel file into my website for football statistics. I want to be able to update the numbers in the spreadsheet and have the website's table automatically reflect these changes. Is there a solution availabl ...

htmlsqldatabaseexcel

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

javascripthtmlreactjs

Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover? <h1>I am looking to have this element replaced...</h1> <span class="fa-stack fa-lg ...

htmlcssfont-awesome

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

c#htmlseleniumselenium-webdriverxpath

What could be causing the unexpected behavior of nth-child?

I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working! .container { height: 100vh; ...

csscss-selectors

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

javascripthtmljquerycss

Polymer elements fail to adapt to varying screen sizes

I am currently working on creating a responsive website using polymer, but I have encountered an issue where certain elements (such as core-toolbar and paper-fab) are not scaling properly on smaller, denser screens like smartphones. After browsing through ...

csswebpolymer

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

Selecting menu items in React Material UI with various background colors using the RAL color selector component

Seeking a solution to create a component for selecting RAL colors using Material UI's TextField and MenuItem. Each item in the menu should have a background color reflecting the RAL color it represents. However, Material UI no longer supports inline s ...

cssreactjsmaterial-ui

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

htmlcss

Why aren't CSS media queries functioning in the existing stylesheet?

I have a good grasp on responsive design and CSS techniques. However, I am encountering an issue where the media query for mobile dimensions is not working as expected. When monitoring the applied styles in Chrome, only the min-device-width styles are be ...

htmlcssresponsive-design

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Creating a progress bar with a circular indicator at the completion point

Looking to create a unique horizontal progress bar with a circle at the end using react js, similar to the image provided. Successfully implemented a custom "%" progress bar and now aiming to incorporate a circle with text inside at the end. To view the c ...

javascriptcssreactjs

Incorporating a static background image slideshow in ASP.NET - a step-by-step guide

I am currently working on my asp.net website and I would like to incorporate an image slideshow as the background of my homepage. This idea was inspired by a site I came across, . I have successfully implemented the slideshow, but now I am wondering if it ...

javascriptjqueryhtmlasp.netcss

Encountered a challenge when attempting to substitute styles using classes in material-ui

While working on implementing a table using the TableRow component from material-ui, I encountered an issue with customizing the background color when the "selected" property is true. The default theme applies a pink background-color in such cases, but I w ...

cssreactjsmaterial-ui