Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome.

Nevertheless, my requirement is for the first column in these rows to be full-width, while the remaining items flow below with the horizontal scroll. This restriction eliminates the option of using wrap.

You can view the page at the following link:

Please note: The full-width heading should only be visible on mobile devices.

Beneath "Calendar Year Deductible," there are row titles such as "Individual" & "Family." These particular items should expand to full width when viewed on a mobile device.

Thank you.

javascriptcssflexboxcss-gridflexboxgrid

Answer №1

Upon further clarification:

From my understanding, you are looking to have all siblings within a flex container except for the first one to be on a single line. The challenge here lies in the fact that flex-wrap is always applied to a parent or containing element. Therefore, unless you place the non-rowheader elements in another container, it seems difficult to achieve this using flexbox alone.

You could introduce a wrapper like the example below and then apply the following CSS:

.flex-row {
  flex-wrap: wrap;
}
.innerrow {
  display: flex;
  flex: 100%;
  overflow-x: scroll;
  max-width: 100vw;
}
<div role="row" class="d-flex flex-row compare-container">

                <div role="rowheader" class="col-3 single-row-label">Individual</div>
                <div class="innerrow">
                  <div role="cell" class="col-3 plan-col _1 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _2 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _3 data-point">$10</div>
                  <div role="cell" class="col-3 plan-col _4 data-point">$25</div>
                  <div role="cell" class="col-3 plan-col _5 data-point">$25</div>
                </div>
            </div>

Prior version:

In absence of a jsbin, here is my suggestion (with necessary media queries):

  • Remove the left:0 from .single-row-label
  • Add max-width: 100vw and overflow-x: scroll to .flex-row

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 method for sending data from Node.js Express to Ember-Ajax?

I am currently developing a website using Ember with a Node JS Express API, and I am utilizing ember-ajax to communicate with the API. EDIT: Ember version: 1.13 Ember Data: 1.13.15 The issue I am facing is that when Ember makes an AJAX call, it seems t ...

javascriptajaxnode.jsexpressember.js

Importing modules from another module in Node.js

I'm currently working on a nodejs app that consists of two files, index.js and ping.js. The main functionality is in index.js which handles routing and other tasks, while ping.js utilizes phantomJS. In my index.js file, I have the following line of co ...

javascriptnode.jsexpressnpmphantomjs

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Currently, I am facing an issue with my image upload functionality. My goal is to retrieve the width and height of each image before uploading them. However, I've encountered a problem where my function only provides the dimensions for the first image ...

javascriptangulartypescriptfilereader

Dealing with website links in Next.js and Chakra-UI: Tips and Tricks

When incorporating react linkify directly with chakra-ui components such as Text, the links cannot be managed. Issue Example import Linkify from 'react-linkify'; import {Box, Text} from '@chakra-ui/react'; export default function Usag ...

javascriptreactjsnext.jschakra-ui

The command 'run-s' is not valid and cannot be found as an internal or external command. Please make sure it is a recognized program or batch file

Unexpectedly, I encountered an issue while attempting to utilize the npm link command to test my local package. Any ideas on how to resolve this? Operating System: Windows 10 Node version: 15.9.0 NPM version: 8.12.2 ...

javascriptnode.jswindowsnpm

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

I am attempting to send a PDF file as a POST request. The API supports the use of @RequestPart and @RequestParam: @RequestPart("file") MultipartFile file; @RequestParam(value = "document-types", required = false) Set<String> documentTypes; My appro ...

javascripttypescriptautomated-testscypress

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

generating a new item using Mongoose searches

How can I generate an object based on queries' results? The table in the meals operates using database queries. How do I handle this if the queries are asynchronous? const getQueryResult = () => { Dinner1300.count().exec(function (err, count) ...

javascriptnode.jsmongodbexpressmongoose

Tips for removing the current item from a list by clicking on a close icon of the same class name

Is there a way to remove a list item after clicking on its close icon? I am using a JavaScript function to add items to the list. Please refer to the image and code below. Thank you! https://i.stack.imgur.com/aeASd.png The code snippet is as follows: f ...

javascriptjquery

Determine if a Node.js Express promise holds any data

I'm looking for assistance with my nodejs application that returns a promise. What I need help with is figuring out how to determine if the result of this promise contains data or if it's just an empty array. I attempted using Object.keys(result) ...

javascriptnode.jsexpressrouterrequest-promise

What are the steps to troubleshoot Node Package Manager errors specifically linked to the node-gyp package?

Although this question has already been addressed in various instances, I am still struggling to resolve the issue using the suggested method. Following an npm install, I encountered errors while attempting to rebuild the node-gyp without any success. Node ...

javascriptnode.jsmongodbnpmnpm-install

What is the proper way to search for a specific string within a JavaScript array during an iteration?

I am working with an array that is continuously updated with new string elements every 2 seconds. The code snippet below showcases how the updates are processed: //tick world setInterval(function(){ doTradeUpdate(); },5000); function doTradeUpdate(){ ...

javascriptarrays

Using React and Redux to update the state of an object with the current state

Upon mounting my component, I make a call to an API and upon success, the state is updated with the following data: { "brief":"No brief given", "tasks":[ { "_id":"5c74ffc257a059094cf8f3c2", " ...

javascriptreactjsreduxreact-redux

Issue with Next JS router.push not functioning unless the page is refreshed

I'm currently running Next.js 14.2 in my project with the page directory structure. After building and starting the application using npm start, a landing page is displayed with a login button that utilizes the <Link> component. I have also disa ...

javascriptnext.js

What could be causing the Babel installation to fail within Electron? Is Babel necessary for my project or can it be avoided?

Having trouble using the npm package https://www.npmjs.com/package/swipe-detect and encountering the following error message: export default function(target, callback, threshold=150) { ^^^^^^ SyntaxError: Unexpected token export at Module._compile (i ...

javascriptnpmelectronbabeljs

Displaying a pair of values using a single noUISlider

I'm trying to achieve something unique with a noUIslider range by outputting two values. While I've managed to display the same value twice using examples from the noUIslider documentation, my goal is to have one of the outputs show a value that ...

javascriptjquerynouislider

"Integrate envMap into the materials section of the model.json file

I successfully exported an object from Blender to .json format for use with three.js. I manually added all the maps to the exported file, which were not included by the exporter but could easily be manually added after mapping correctly in Blender. model. ...

javascriptjsonthree.jsmappingblender

The not:first-child selector targets all elements except for the first one in the sequence

This is a simple js gallery. I am using not:first-child to display only one photo when the page is loaded. However, it does not hide the other photos. You can view the gallery at this link: (please note that some photos are +18). My objective is to hide ...

javascripthtmlcss

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

How can I iterate over the following foreach loop with a delay between each item and a fadeIn effect on each? I am debating whether .append() is the most suitable function to use since I want to load a templated div with the class #fan for each person in ...

javascriptjqueryajax

Launching an external JavaScript from within a separate JavaScript file

I'm in the process of developing a virtual 'directory' for various locations in my city to assist fellow students. Here's the concept: On a map, I've pinned all the locations Clicking on these pins triggers a JavaScript funct ...

javascriptcase