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.
22,088
questions
-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 ...
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>
<...
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 ...
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.
...
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 ...
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 ...
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 ...
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 ...
-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 ...
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....
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 ...
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-...
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 ...
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;
}
...
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 ...
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;...
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, ...
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.
...
-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 ...
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 ...
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="...
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 ...
-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 ...
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 ...
-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 ...
-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 ...
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&...
-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?
....
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 ...
-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()...
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.
<...
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 ...
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&...
-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 {
...
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 ...
-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 ...
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 ...
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-...
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 ...
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 ...
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 = {
...
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 ...
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 ...
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&...
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 ...
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 ...
-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 (
...
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 ...
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 {
...
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&...