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
0
votes
0answers
7 views

Foundation 6: Horizontal dropdown nested in a vertical dropdown - can the nested menu be aligned to the top?

I have a vertical menu nested in another vertical menu, and the dropdown opens to the right. The top of the sub-menu is aligned with it's parent item, but I'd like it to be aligned with first item in ...
0
votes
1answer
12 views

flexbox container two divs responsive

How I can make responsive flexbox? So I use flexbox and two divs, one for leftside and one for right side. Screen is like splitted, left side is image and right side info and inputs. But left side ...
0
votes
0answers
16 views

how to align a child div to bottom on a scrollable parent div

I am working on a chat system and I have a scrollable parent div and a child div that contains the messages such that: #parent { width: 100%; height: 100%; overflow-x: hidden; ...
0
votes
0answers
11 views

Flex overrides img height and width [duplicate]

I have a container that is using flex. I want to have an image on the left and a quote on the right with 15px of margin between them. Unfortunately, the flex property seems to be overriding the ...
0
votes
1answer
27 views

Want flexbox button to take up newline when the text inside is too long

I have 2 flexbox buttons in my page and when I internationalize and change to german, the buttons are long and the text forms two lines inside the button. But I want the button to take up the entire ...
0
votes
1answer
36 views

Aligning an image and an anchor tag inside a figure tag

I am stuck and out of ideas, I tried to achieve the following with flexbox and failed. What I am trying to achieve is to have an imgtag centered inside a figure tag and have an a tag which contains ...
0
votes
3answers
40 views

Centering Divs for footer

I have created a footer for my site and it looks perfect, the only problem is I want the whole thing centered. I want the DIV called as-seen-items to be aligned in the middle of the black bar.. but it ...
0
votes
0answers
25 views

Hot to stretch flex child in scrollable container

I have a flexbox container with fixed width and overflow-x: auto. One of the child also has fixed width, which is more than the width of container, due to this reason horizontal scrollbar appears. How ...
0
votes
0answers
19 views

How to vertically align a dropdown while a button sticks to the bottom in React-Native?

I am trying to vertically align a select dropdown while I have a 'Next Button' that sticks at the bottom. The style I came up with works for static input boxes or radio buttons but the select dropdown ...
1
vote
1answer
10 views

Material-UI Grid Overflow Column into next Row

I am generating a list of from a list of 'x' items: I want to know how I can get the list to display like this item1 item2 item3 item4 item5 item6 using Material-UI Grid. Currently I am using ...
0
votes
1answer
35 views

How to prevent child's content from stretching parent's width

I have a component (Container) that contains an icon (marked with an X below), a title and a child component (Message) that contains a long message. I would like Container's width to wrap around the ...
2
votes
1answer
43 views

Prevent button from taking up the full width of its container

I am using the Material UI button (with customizations in styled-components) in my app. Previously, by passing the size="small" prop to the button, the button was only taking up the width of the ...
0
votes
2answers
28 views

How to make child header element sticky with footer of unknown height at bottom of viewport or below

I have a fiddle to describe my problem: https://jsfiddle.net/ajbrun/yaq13ghu/7/ I would like to have the footer of unknown height (green) always at the bottom of the page or below (if pushed by ...
6
votes
1answer
47 views

Change the div order if it wraps/overflows, without media queries

Here is my problem. I have a navbar whose menus/links are located in the center. on the left is the logo, on the right are cta buttons and icons If it overflows/wrap, the center column should put it ...
1
vote
1answer
23 views

Ionic how to move an element to the right

I have elements that I want to move to the right buts it't not working. <ion-list> <ion-item> <ion-label> <ion-skeleton-text animated width="70%"></ion-skeleton-text&...
0
votes
2answers
32 views

PHP echo loop is breaking CSS flex box

It looks like a PHP echo loop is cancelling out css flex box. The code still dynamically displays and the font, etc.. correspond correctly to the css however on the page the "a" tags don't wrap to a ...
0
votes
1answer
35 views

Effect of making an <a> a flex container

I have seen that making links a flex container can be useful when vertically/horizontally centering text within a link used in navigation elements. I didn't realise that the link text can actually be ...
0
votes
2answers
51 views

First two divs on the left (one under the other) and the the last one on the right using Flexbox

I'm trying to place three divs using Flexbox. I need to put the .site-title and .site-description divs on the left one under the other, and the .menu-toggle button on the right like below. I tried ...
2
votes
1answer
54 views

Grid item height not matching responsive square child

I'm creating a web application with React and Material-ui. I need a responsive square div for a map component, however, using a trick from iamsteve.me breaks the grid layout as the parent Grid div ...
1
vote
1answer
44 views

Can't get flexbox to work for safari (only), works in everything else

I've been pulling my hair out to try to figure out why my page isn't displayed properly on Safari. It works well with all other browsers, until I checked it on my phone. Screenshot on Safari (iPhone ...
1
vote
1answer
25 views

Avoid same width on child elements on flex with flex-direction column [duplicate]

So I have this nav-bar where I used flex with flex-direction column to make the child elements under eachother. The problem I now have is that the width on the child elements is the same on all of ...
0
votes
1answer
28 views

Safari: Min-height 100% doesn't work inside a flex-grow child [duplicate]

In Chrome, Edge, and FireFox, the below code produces the (correct) output where the innermost div fills it's parent using min-height: 100%. However, in Safari this does not occur. I expect the green ...
1
vote
0answers
37 views

How to add prefix to react native text input?

So I have a string of text which I'm trying to add in-front of a TextInput. I made that string of text a non-editable TextInput due to alignment issues. The problem I'm facing is, I couldn't get the ...
0
votes
1answer
30 views

CSS layout two columns with indent in second column

I'm trying to do this layout without breaking it into two separate wrapper columns. It should be one list of divs. But the second column should start with a margin-top or indent. sample photo At the ...
0
votes
1answer
56 views

Image positioning in image gallery

I'm trying to keep leaderboard/photographer image always right top position even in responsive. Here is my code * { box-sizing: border-box; } body { margin: 0; font-family: Arial; }...
0
votes
2answers
67 views

How can I get Firefox & IE to render writing-mode properly in a flexbox layout?

I'm using writing-mode: vertical-lr inside Flex box. The layout works properly in Chrome 76, but totally buggy in Firefox 68 & IE11. Note on requirement: For a specific scenario, I need % ...
1
vote
4answers
63 views

responsive 100% width banner with text

I need to add a text on my 100% width responsive banner .banner { display: flex; } .banner img{ width: 100%; } <div class="banner"> <img src="images/truck.jpg" > <...
0
votes
2answers
27 views

Holding Images to a specific Position even when window resize

So I made a website which is working fine (http://hltvnewsgenerator.com/previewavatar/) however when I change the resolution of the window myself, It moves image to some undesired position. I want ...
0
votes
1answer
18 views

AntDesign TabPane min-height 100%

Using Ant.Design Tabs https://ant.design/components/tabs/ How can I set styling on TabPane so that it's min-height is always 100% height of the window even when it's empty? Below example should ...
0
votes
3answers
46 views

Ellipsis (three dots) won't show for longer texts [duplicate]

I've set the style as show below. div>span { display: flex; flex: 1 0 0; align-self: center; align-items: center; justify-content: flex-end; overflow: hidden; text-overflow: ...
1
vote
2answers
42 views

stacking div on top of text relative to container div

I'm trying to create a text reveal animation. for that I have 2 divs that need to be on top of h1 & h3 tags inside an anim-container parent div. The .anim-container is a flexbox with column flex-...
1
vote
1answer
33 views

Flex child grows over container when parent uses flex and elements have no content

I have this strange behavior I cannot explain myself. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; ...
0
votes
1answer
45 views

Keeping 100% Pageview height

I'm trying to keep my page to a single fixed view (100% height & width) and wrap any long content using react-custom-scrollbar found within Layout <content>. Ideally I would like to only ...
1
vote
2answers
42 views

Heading elements appearing below content

I can't position the items correctly: 1 - The titles "App name", "Title 1" and "Title 2" (h1 tags) are located below the cells and not above. 2- The vertical spaces between the div are very large I ...
0
votes
2answers
39 views

Flex Layout not following flex percentages

I am trying out flex layout in my angular app. I am trying to create a layout with base as : I have tried writing a code. my .html file <div flexLayout = "row"> <div fxFlex="100%" class=...
0
votes
0answers
13 views

Scrolling horizontally not working using flex-basis [duplicate]

I'm using a flex-basis of 33% to set the width of a container that will have content whose width exceeds the width of that 33%. I want that content to scroll horizontally within the container, but ...
0
votes
1answer
26 views

How to make unordered lists responsive with flexbox?

Right now I have an unordered list like this: and in mobile view it looks like this: Code (HTML / CSS) ul { display: flex; list-style-type: none; padding: 0; } li { flex: auto ; ...
0
votes
1answer
15 views

React Native: Why doesn't setting flexGrow on a <View> inside a <ScrollView> work?

In my React Native app I have the following code: <View style={{flex: 1}}> <View style={{backgroundColor: 'black', height: 50}}/> <ScrollView style={{borderWidth: 1, ...
0
votes
2answers
28 views

How can I implement this using flexbox?

I'm trying to implement Microsoft's Logo using CSS Float and CSS flexbox (just as a CSS practice exercise) I got it working using floats however, I couldn't get it working with Flexbox. Can someone ...
0
votes
1answer
19 views

Flex with wrap and unequal column width [on hold]

I want that flex will show only 2 columns per row and then automatically goes to next row. And then the first column of row will take size only according to the content. Suppose if we have 10 rows ...
1
vote
1answer
27 views

Bootstrap: Rearranging rows into columns and changing the order of elements

I'm working on a project with React-Bootstrap. I have a section, which on mobile/xs view, should look like this: The red squares are toggle buttons and the blue square is the current displayed image. ...
2
votes
2answers
33 views

bootstrap flex do not center the content

bootstrap flex do not center the content <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true">&...
1
vote
2answers
54 views

Image stretching in flexbox in Safari

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue. When an image is in a nested flexbox element with a width set and height: ...
1
vote
1answer
51 views

Add dynamic margins using UI Kit

I need to add margin between the cards, but only internal margins. The code below is responsive. Large Screens has 4 Cards. Medium Screens has 3 Cards. Small Screens has 2 Cards. Micro Screens has 1 ...
-1
votes
0answers
19 views

Using Flex-Column to display items in Alphabetical order in Two Columns [duplicate]

I have an application that receives a list of items from the server in alphabetical order. Client wants this list to be displayed in two columns and in order (Column 1 going from A to D for example ...
0
votes
2answers
40 views

Change content for Material Design's responsive button based on screen's resolution

I'm using Angular 8.x along with Material Design components (for Angular) and @angular/[email protected] I'm trying to make a responsive mat-toolbar and I'm running into a small issue (that ...
4
votes
1answer
58 views

Detect mousehover and mousedown events inbetween flexbox elements

I have the following HTML/CSS: .item { border: 1px solid gray; text-align: center; box-sizing: border-box; padding: 10px; } .flex-row { width: 100%; display: flex; ...
0
votes
1answer
40 views

Why is there a padding around flexbox containers? [duplicate]

There seems to be a padding around the container and in between the two columns. How do I get rid of them? I tried setting margin and padding to 0 but it did not work. https://imgur.com/iM1Pl0H ...
-1
votes
1answer
21 views

How to create photo grid using flexbox with same order [duplicate]

I have an image grid with 2 rows(Horizontally).at initial state, the first row has 4 images and the second row has 2 images user will be able to add extra images to the second raw. in first-row images ...
0
votes
2answers
46 views

How do I apply justify-content: space-between to this column?

I cannot apply justify-content: space-between to "DIV1", the div containing all the items in the column. I have tried to change the height of DIV1 and any of its parent containers to 100%. I have ...