Limiting Overflow X to a maximum of two rows

I have a question about displaying this blue element in only a maximum of two rows. When I set flex-wrap to wrap, I lose control over the number of rows displayed. My goal is to have a maximum of two rows and for the blue items to scroll along the x-axis. Here

cssreactjsflexboxgrid

Answer №1

If you prefer, you can utilize the grid property. However, keep in mind that if you aim for just two rows, the child elements may overflow.

.parent {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  overflow-x: auto;
}

To address this issue, consider using the flex property with a specified height for the .parent element.

.container {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  overflow-x: auto;
}

.parent {
  height: 100px;
  display: flex;
  flex-flow:column wrap;
  justify-content: space-between;
}

.child {
  margin: 5px;
  flex-basis: 35%;
  background-color: blue;
}
<div class="container">
  <div class="parent">
    <span class="child">1 loremnxckvxckhv</span>
    <span class="child">2 loremnxckvxckhv</span>
    <span class="child">3 loremnxckvxckhv</span>
    <span class="child">4 loremnxckvxckhv</span>
    <span class="child">5 loremnxckvxckhv</span>
    <span class="child">6 loremnxckvxckhv</span>
    <span class="child">7 loremnxckvxckhv</span>
    <span class="child">8 loremnxckvxckhv</span>
    <span class="child">9 loremnxckvxckhv</span>
    <span class="child">2 loremnxckvxckhv</span>
    <span class="child">3 loremnxckvxckhv</span>
    <span class="child">4 loremnxckvxckhv</span>
    <span class="child">5 loremnxckvxckhv</span>
    <span class="child">6 loremnxckvxckhv</span>
    <span class="child">7 loremnxckvxckhv</span>
    <span class="child">8 loremnxckvxckhv</span>
    <span class="child">9 loremnxckvxckhv</span>
  </div>
</div>

Answer №2

Adjusting the width of a container.

Increase the width to 750px or more

.container {
  width: 750px;  // New width
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
}

Answer №3

.wrapper {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;

  overflow-x: scroll;  
}

.main {
  display: flex;

  flex-wrap: wrap;     
  width: max-content;  
}

.subsection {
  margin: 5px;
  background-color: blue;

  flex-basis: 6%;  
}

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

Adjust the size of col-lg-3

Is there a way to adjust the size of my col-lg based on different screen resolutions? I'm looking for a solution that can change the size of col-lg depending on the screen resolution. For example: .col-lg-3 { /* styles for screens with 1366x768p ...

csstwitter-bootstrapbootstrap-grid

Exploring React component and context testing

I am currently facing a challenge with writing unit tests for my React components. Even though I am new to React, I have been using context to manage data between my components. However, I am encountering difficulties in passing context to my .test.js file ...

reactjsjestjs

What causes the difference in behavior between absolute positioning in <button> and <div>?

I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...

htmlcsscss-position

What methods can I employ to utilize React/Node in retrieving project file data solely through the front end?

Overview Currently, I have developed a front-end only React web application by executing the command react-scripts build. To simplify routing files without manual intervention, I have integrated @react-file-based-routing/react-router-dom from npm. I am c ...

reactjsnode.jsnpmfrontendreact-scripts

Is there a way to modify the CSS of another element when hovering over it?

I am working on a thermometer design that features multiple segments and a circle at the start. When hovering over each segment, I want it to highlight along with the circle. Currently, the issue is that the first segment is created using two overlapping d ...

jquerycsshover

access older siblings, accordion animation

I need assistance achieving an accordion effect on a DIV when hovering over it. The right side of the accordion is functioning properly, but I am facing issues with the left side. You can view my code on jsFiddle Could someone please provide guidance on ...

javascripthtmlcss

Looking to Switch from HEIC to JPG in Your React Project?

HEIC stands for High Efficiency Image Format and is used by Apple to store high resolution images captured with iOS cameras. However, since HEIC images are not widely supported in browsers, including Safari, it may be better to store them as JPG on the bac ...

reactjsnext.jsjpegimage-conversionheic

The initial loading of my default page in git does not display properly

I am experiencing an issue with my code. When I first visit the git page, the default page does not load. However, the content loads after I click on the home page nav link. source code Here is the link to my GitHub page: https://github.com/tekbhattarai/t ...

reactjsgithub

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

What is the best way to execute a function from a parent element within the child element?

Currently, I am working with two components - Navbar (parent) and Setting Menu (Child). const Navbar: React.FC = () => { const classes = useStyles(); const [randomState, setrandomState] = useState(false); const randomStateFunction = () =>{ ...

reactjstypescript

Received an error stating "Uncaught TypeError: Unable to access the property 'PropTypes' of undefined" while encountering problems with React Bootstrap. Additionally, facing issues with ReactDOM not being defined due to

Currently, I am in the process of developing a React-JS website with Express handling the backend. For authentication, I am utilizing react-router and react-stormpath. I have also incorporated webpack into the project. However, I have encountered some ch ...

javascripttwitter-bootstrapreactjsreact-dom

Ensure that the right position of a fixed element remains constant even when the parent container may or may not have a scrollbar

Is there a way to ensure that the position: fixed; element always remains exactly 16px from the right, regardless of whether its parent's content is overflowing or not? <div style="overflow: auto; position: absolute; right: 0;"> <div style= ...

csscss-position

Putting Tailwind pruning to the test in a React application using Jest

Is there a way to test Tailwind's pruning using Jest without the need for custom postcss configuration? Can it be done by solely implementing the default webpack config created by CRA 5 (as explained here)? It appears that Tailwind is not applying st ...

reactjstypescriptwebpackjestjstailwind-css

customized hover effect based on the image's specific characteristics

I need to change the background color of a set of images based on which image is hovered over. For example, when I hover over the 5th image, the first 5 images' background color should change. Similarly, when hovering over the 4th image, the backgroun ...

javascriptjqueryimagecss

Issue concerning props and renderItem within react native's flatlist encountered

I am currently working on a basic project in react native to get familiar with everything before I start my main project. The main objective of this project is to display an array using a flatlist, but the challenge is to modularize it gradually (e.g. sto ...

reactjsreact-nativereact-propsarrow-functions

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

I am currently working with React, Typescript, and Material UI. My goal is to pass a ref as a prop. Within WidgetDialog, I have the following: export interface WidgetDialogProps { .... ref?: React.RefObject<HTMLDivElement>; } .... <div d ...

reactjstypescriptmaterial-ui

Unable to allocate submit event category

This is a question about code and an error message. The code snippet is shown below: const handleSubmit = (e: React.FormEventHandler<HTMLFormElement>) => { // e.preventDefault() } <form onSubmit={handleSubmit}></form> Below is ...

reactjstypescript

Ways to Influence Nearby Element using CSS Hover Effects

Below is the HTML code snippet: <div id="flexi-overlay"> <a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?> <img src="image.jpg" /> </a> <span id="flexi ...

htmlcssopacity

Troubleshooting a dysfunctional collapsed navbar in React with Bootstrap 5

I am experiencing an issue where the collapsed navbar icon does not expand when clicked on smaller screens. I followed the example provided by bootstrap 5 and made sure to include bootstrap css/js and jquery. class CustomNavBar extends Component { re ...

javascripthtmlcssreactjsbootstrap-5

Is there a way to completely remove all styling from a specific child element?

Struggling with a drop-down menu issue - the parent element has a border, but I don't want that style to be inherited by the child sub-menu. Despite my attempts to remove the border using border: 0px, it's not working as expected. Is there any wa ...

htmlcssinheritanceparent-child