Questions tagged [flexbox]

CSS module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.

Filter by
Sorted by
Tagged with
-2 votes
0 answers
23 views

How to make two h1 headers in HTML have same color style while only adding css attributes to first h1?

whenever I try only adding attributes to first h1 element, only the first h1 header becomes blue but I want the other h1 element to change color as well without having to add another attribute to it ...
gelowzzz's user avatar
1 vote
2 answers
70 views

How can I position the second element in a series of four as a sidebar?

How can I place the divs in a specific place within the container without changing the HTML? <div class="container"> <div class="item item1">Item 1</div> <...
Mot's user avatar
  • 11
0 votes
0 answers
31 views

Substantial performance decrease when using display: flex

I have a table with 3880 table rows of the following syntax: <tr class="netflixDataResult" active="no">html</tr> I have added event listeners to all of those, when one ...
Lennart Melief's user avatar
0 votes
0 answers
16 views

Right, so I need to create a health care system using LPA WIN prolog. The program has to be written in Flex

Here are the rules that i need to follow. If the risk to the patient is low or medium, then a clinical trial is justifiable. If the risk to the patient is high, then a clinical trial is unjustifiable. ...
Bogdan Linnik's user avatar
1 vote
1 answer
27 views

How to have a Scrollview inside a fixed View of height "100%" React Native

I would like to have a Scrollview inside a fixed View, so that when I scroll the Scrollview, the rim of the View is still always there (the View is like the frame of the scrolling content). It works ...
Nguyễn Minh's user avatar
0 votes
1 answer
27 views

Flexbox footer won't evenly space

) I'm a super novice coder just trying to make a responsive site for my music. I have managed to get a basic template together, but my footer isn't working how I'd hoped. I've put 4 image/ a tags in ...
ScienceFromSVN's user avatar
0 votes
0 answers
24 views

Automatically repeat first column when grid layout wraps with CSS

I'm trying to construct a layout that conceptually is like this: h1| A1 | B1 | C1... h2| A2 | B2 | C2... h3| A3 | B3 | C3... where h1 is a header describing the content at A1, B1, C1. When there are ...
Steve Bennett's user avatar
0 votes
1 answer
49 views

CSS flex - have at least two items per row with minimal text truncation

I am working on a layout of items in CSS and I am trying to achieve the following: If there are enough items, then there should be at least two items or more per row. There could be more than two ...
ashipma's user avatar
  • 445
-1 votes
1 answer
40 views

Flexbox causes inline blocks to become new blocks/new lines [closed]

So I have an h3 with a flexbox class (necessary to make it properly structure an accordion). When I try to italicize part of the text however, with either <i> or <span>, it essentially ...
user250299's user avatar
0 votes
0 answers
14 views

CSS flex child overflowing parent height inside grid [duplicate]

I have a CSS grid with 2 columns. In the right column is a tab component which is a flex container. I am trying to make the tabs content scrollable, while keeping the tabs itself positioned at the top....
DanteC's user avatar
  • 188
0 votes
2 answers
94 views

Fit image with natural dimensions to parent container max-height constraint (without object-fit)

I have an image where the height should be constrained so the container height is a maximum of 400px. The image should maintain its natural aspect ratio. Critically, I cannot use object-fit because I ...
aeharding's user avatar
  • 528
0 votes
0 answers
27 views

How to add margin vertically between the flex buttons and possibly justify

With this code i get the buttons spaced horizontaly. What code do i need to add to get the buttons spaced vertically (same as horizontally) when the buttons wrap ? And may be justify it ? CSS .flex-...
volvox's user avatar
  • 1,204
0 votes
1 answer
23 views

How to extend flexbox pseudo-element lines to full width of the container?

I have a layout with a section of text and two links, where I want lines to extend from the end of each link to the end of the container. I can achieve this using position: absolute; and setting a ...
erfergo's user avatar
0 votes
1 answer
24 views

html table overflow-x is not working with display flex

Responsive Table Overflow-x is not working inside flex-basis. <style> table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } ...
Vishal Tanna's user avatar
  • 1,225
0 votes
0 answers
9 views

Difficulty in Achieving Design on [FIGMA SCREENSHOT] – SVG Waves Not Adapting to Container Item 2 size

Hello Stack Overflow community, I'm a designer, Just started studying HTML and CSS. I'm working on implementing a specific design for a webpage, and I'm encountering an issue with the SVG waves not ...
Caíque B's user avatar
0 votes
0 answers
33 views

Nested flex lose overflow:auto feature [duplicate]

In the following code content is a scrollable area and fill height body, html { margin: 0; padding: 0; height: 100%; } .container { height: 100%; display: flex; flex-direction: column;...
A.A's user avatar
  • 3,260
0 votes
0 answers
43 views

How to make the size of a grid element dynamic in CSS?

I have a question for sizes in CSS. I have a Figma files with a grid, I want to keep the same size of this Figma files. For example on a 1728px width screen I have these sizes: the grid is 1708x1487, ...
Polikuc's user avatar
  • 41
0 votes
3 answers
70 views

Why is flexbox container wider than the image it contains?

I want to create a simple webpage with a header and image below it. It needs to meet the following specifications: The sum of the header height and image height should total to the viewport height. ...
Jimmy's user avatar
  • 11
-2 votes
2 answers
27 views

Is there a way to see if a GRID layout has responsively collapsed to just one column?

I am getting into GRID and FLEX and trying very hard to abandon just DIVS with floats. Does anyone know if there is a way to determine (JQUERY is fine) if a GRID layout has collapsed into just one ...
Ira G's user avatar
  • 131
0 votes
1 answer
26 views

I'am trying to position H2 headings ("Esportes" and "Economy") as titles for their respective sections

I'm working on a web project and I'm having trouble positioning H2 headings ("Esportes" and "Economia") to serve as titles for their respective sections. I've tried put the h2's ...
Nathan Vicente's user avatar
0 votes
4 answers
57 views

Parent div expanding larger than child img node

I have a flex item, image-container, that contains an image: <div class="container"> <div class="image-container"> <img class="image" src="...
Jimmy's user avatar
  • 11
0 votes
0 answers
58 views

How to center second item in a three item container that is fluid [duplicate]

How can I center the "to" div? The red line is the center of the bg-emerald-50 div. (I messed up when adding the red line, it's 20-30 pixels off but you get the point.) Important! The items ...
PussInBoots's user avatar
  • 11.2k
-1 votes
0 answers
26 views

Want to make img background a flex-box and overlay three black text boxes with space-between

I am trying to create three text boxes with white text and a black background laid on top of a background image, all inline by using display flex. I was able to accomplish this with a flex previously ...
Tsumind's user avatar
1 vote
0 answers
18 views

Don't stretch flex with wrapped items [duplicate]

I have an example with several flex containers: https://codepen.io/Alexandr-Kravchuk/pen/gOqjNqy There I can't set CSS such way than flex0 does not extend when elements wrapped. This is correct ...
JBeen's user avatar
  • 407
-2 votes
2 answers
55 views

Is there any tag in html5 to make drop-down button? [closed]

Is there any tag in html5 to make drop-down button? How to make navigation bar like drop-down feature in html5? I tried to make it using flexbox property of CSS and select tag of HTML5, but i did not ...
Priyanshu Sinha's user avatar
-2 votes
2 answers
66 views

Put text and image side by side and aligned vertically with the navbar

I want the text to be side by side with the image aligned with the nav bar logo. But it seems like the image is taking up all the space, I didn't add a smaller width, because I want the image to be ...
olamundo97's user avatar
0 votes
1 answer
24 views

Flex and Tailwind CSS rows auto stretching

I am really struggling with a two column forms. I am using flex and tailwind css. Here is the part of my html causing the trouble <div class="w-full flex flex-row flex-wrap&...
Sandeep Thomas's user avatar
-1 votes
1 answer
36 views

align radio button inline with text

I tried the following with flex but it looks like the radio button is slightly lower than it should be. probably to accommodate letters like j q g but not a b c. Is there a way to adjust? ....
DCR's user avatar
  • 15k
0 votes
0 answers
19 views

Issue with Angular scrollable and flex directive in scroll container

I am facing an issue when trying to use the Angular scrollable directive in a container with the flex property. The directive doesn't seem to activate when I add flex styles to the container, and when ...
Izlia's user avatar
  • 245
-3 votes
0 answers
10 views

Flex Removal Impact [closed]

When I remove flex from line:3(div with background red) the height of child div(diagonalPanel bg-blue-500) changes. import { Dialog, Transition } from "@headlessui/react"; function Example()...
Muhammad Abu Bakar's user avatar
0 votes
1 answer
46 views

How can I make the last mat-card to stretch out to fill the remaining vertical space?

Code Snippet: Problem Description: I'm working on a project where I have to make the last mat-card containing the + Manually enter button to stretch out vertically filling the remaining space. <...
Visi's user avatar
  • 1
1 vote
2 answers
30 views

Flexbox creating too wide of a gap between elements

I'm looking for a fixed 40 pixel gap in between columns but the wider you make the screen the larger a gap flexbox creates. How do I set this fixed gap and stop this behavior? (its complaining about ...
Jim Christiano's user avatar
0 votes
1 answer
16 views

flexbox and tailwindcss : Cards Not Displaying Responsively in a Row as Expected

I'm trying to reuse a card component. I want to show max 3 cards in a row on large device and on medium i want to show 2 cards in a row but it's not working import { Link } from "react-router-dom&...
Abu RayhaN's user avatar
-1 votes
1 answer
59 views

4-column layout in CSS Flexbox is wrapping into a new line on very small screens?

* { box-sizing: border-box; } body { font-family: Verdana, Geneva, Tahoma, sans-serif; background: #f3f3f3; } .container { border: 5px solid red; display: flex; flex-wrap: wrap; } .box { ...
Nikhil Kumar's user avatar
0 votes
1 answer
53 views

Bootstrap 4.6 create scroll div inside nav tab content

I am using Bootstrap 4.6. I want to create two auto scrollable (when content overflows) columns content inside nav tab content. I am trying with flex utilities. This is code I wrote, but it's not ...
Carlos Schroder's user avatar
-2 votes
0 answers
17 views

CSS Flexbox Issue: Child Elements Not Aligning Horizontally [closed]

I'm encountering an unexpected layout issue while using CSS Flexbox to create a horizontal navigation bar. Issue While I expect the .nav-item elements to align horizontally with space in between, they ...
OM RENUSE's user avatar
0 votes
1 answer
43 views

Why does my sliding component toggle have a gap?

Currently i have the component working like in the added .gif, with the yellow gap. I need component 1 and 2 to move without gap. I cant figure out why the yellow background becomes visible during the ...
leroyv's user avatar
  • 63
0 votes
1 answer
33 views

Prevent div in flexbox from changing width with additional content

Hi I have this web page where I have a list of angular.js directive elements that are strucured in a flexbox. The directive elements look something like this: <div class="variable-input-...
Sigmarod's user avatar
0 votes
1 answer
50 views

Make an <iframe> fill the <div> without changing the default dimensions of another element in the <div> using only CSS

I was asked an interview question about CSS. The problem is as follows. There is a <div> with an <img> and an <iframe> in it, arranged vertically. The <img> has unknown default ...
Allen's user avatar
  • 113
2 votes
2 answers
107 views

CSS: how to have a 2x2 grid with images centered inside each cell and a div at the bottom right corner of each image

Basically I have two conflicting requirements for my template that I cannot find a solution for: it's a 2x2 grid with 4 images, each image centered in its own cell, the image sizes must shrink when ...
Felix Olszewski's user avatar
1 vote
2 answers
52 views

The tags keep on piling up vertically, I want to make it pile up horizontally

When I click the plus button, the text just piles up vertically, how do I make them in a straight line. I think the problem has to do with this part of the code const tagsContainerStyle = { ...
Ifesol's user avatar
  • 15
0 votes
1 answer
34 views

in flexbox how to have children width equal to parent width?

I have difficulties understanding how the width property works on children items of a flex container ? I would like to know what is the reliable cross-browser way of having the child element having a ...
hugogogo's user avatar
  • 549
0 votes
0 answers
15 views

Can't add scrollbar when using flex-grow

I want .lines-wrapper to have a scroll when the .line-row takes up more than 270 px. I loop out multiple .line-row and they need to adjust to the height that is available, hence using flex-grow. I ...
fiwi92's user avatar
  • 11
0 votes
1 answer
48 views

the length of scrollbar of flex parent is shorter the length of child

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&...
ryeong928's user avatar
0 votes
0 answers
41 views

How to set up a flex container as 3 alternating rows that drop content below with media enquiry

I have pieced together this section for my website using flex containers, and it works for the most part. But I do have a few issues. All of the rows are supposed to break down into a single column ...
Jack Archer's user avatar
0 votes
2 answers
67 views

Why are my flexbox properties disturbing my hr tag?

So I am making a sidebar with my code and want there to be a divider between some elements, to achieve that I used the hr tag but it behaves unexpectedly when I use it in my contextual code. When I ...
Your-neigbourhood -developer's user avatar
-1 votes
0 answers
26 views

flex on div makes the child elements shrink to fit [closed]

I want to make the component scrollable and give gap between them. <div className="overflow-y-auto max-h-64 flex flex-col"> {playlistVideos?.map((video) => { return ( ...
Rahul Kumar S's user avatar
0 votes
0 answers
27 views

iPhone image stretching in home page

my django website's homepage looks fine on almost all devices but on the newer iphones, the image inside the "image-container" is VERY stretched out. To the point it makes the page look ...
Fuzz Ashes's user avatar
1 vote
3 answers
67 views

Force line break after nth element in flexbox layout

I have following code (simplified): .container { display: flex; flex-wrap: wrap; } .child-33 { height: 50px; border: 2px solid; width: 33%; box-sizing: border-box; } .child-50 { ...
warch's user avatar
  • 2,479
1 vote
2 answers
73 views

How to make a scroll content in between the header and footer

<div class="flex h-screen w-full flex-col"> <header class="h-64 bg-cyan-300"> <h1>I'm header</h1> </header> <div id="pageContent&...
Ronnie Tseng's user avatar

1
2 3 4 5
442