Questions tagged [flexbox]

4

votes
3

answer
135

Views

Flexbox rendering broken with latest Chrome

After a Chrome update (73.0.3683.75), my flex rendering is completely broken. The issue is known and discussed here and here on SO, however I can't understand their fix and make it work in my case, as I don't know CSS and Flex very well. I made a plunker that replicates the issue. If you open it wit...
David D.
1

votes
2

answer
46

Views

Move element to the right with Flexbox

Basically, I'm trying to move my hamburger menu div to the right side of the page with Flexbox, but it refuses to budge. I've tried the flex-start/flex-end stuff, I've tried margin-right/left auto, but it doesn't seem to work. The only thing that makes it work is if I put in a fix left margin, but...
jollyjwhiskers
1

votes
1

answer
25

Views

Centered content is cut out of parent with fixed height and scrollbar

I have a parent with overflow-y and a fixed height. I wish to center align its child. The content of the child can vary in size, and sometimes it overflows the parent and triggers a scrollbar. In those cases, the top and bottom content of the child is cut out. I wish the child to be center aligned,...
Chris
1

votes
2

answer
30

Views

flex container can't detect window scrollTop offset

i need to get the window.pageYOffset || document.documentElement.scrollTop; value. To determine 1) if user has scrolled over the header 2) and direction st < delta && lastScrollTop !== 0 $(window).on('scroll', fn) didn't worked, so i used $('main').on('scroll', fn). It's because I am using body { d...
Eriks
1

votes
2

answer
73

Views

css - flex for mobile

I have some html and css that looks like the following: .media-object { display: -webkit-flex; display: -ms-flex; display: flex; align-items: flex-start; } .media-object .figure { margin-right: 20px; flex: 1 0 40%; max-width: 300px; border: 5px solid grey; padding: 3px; border-radius: 7p...
Wayne
1

votes
2

answer
62

Views

HTML form input elements visually positioned outside form

I have container with height set to 0 which contains form. show register form What I want to achieve, is form sliding out of 'box-wrapper' element (which initially has display property visibility set to hidden) after clicking button with 'show register form' text. On click I'm adding css class which...
Furman
1

votes
4

answer
34

Views

Pinning icons to corners of flexbox container with flex-start and flex-end

I have a video container. When the video is not playing, I'd like three things available: Icon or initials of remote user (top left corner) Video play icon (center) expand / contract (bottom right corner) I've tried to push the icons to the corners using align-self: flex-start and align-self: flex-e...
ardochhigh
1

votes
1

answer
65

Views

vuetify tabs component doesnt work correctly with flex animation

I'm trying to get the v-tabs to work with my expand menu. Basically when I click the toggle open, the right side menu will slide out, and inside this menu I want to use the tabs component from vuetify. It doesn't seem to work, when clicking on the tabs, it's jumping all over the places. It starts to...
stenwolf
1

votes
1

answer
55

Views

What's the equivalent of React Native { flex: 1 } for React JS?

I have been programming a lot in React Native and I'm trying React js (only web) and I don't know to make a simple View that get all screen to start play with all components. Let me explain: In React Native I handle the View dimensions with flex, something like this: I'm a blue 50% screen View! I'm...
Mtg Kha Jeskai
0

votes
0

answer
16

Views

Setting up Flexbox horizontally and content vertically

I have multiple items say cards. These cards need to stack horizontally and height needs to be the same. This is happening for me. Each card has an image, text and a button. Image and text for each card should take what ever is the max height in any card, so that these align properly. This is not...
learning...
0

votes
0

answer
38

Views

Flex content in tag <th>

I want to create flexbox in content between tags th (table headers), but when I add display:flex to all th tags as parents to the content I want to flex then all headers are 'wrapping' and shaping in some kind of row table. I don't want to flex table headers but only content inside each header. I'll...
Tymon
0

votes
1

answer
18

Views

How do I make an image shrink to fit inside a fixed position flex box modal

How do I make an image shrink to fit inside a fixed position flex box modal? When trying the below the image overlaps the header/footer. It needs to work for images both tall, or wide, and in IE. .modal-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .modal-content { displ...
Petah
1

votes
3

answer
49

Views

CSS: Text under image div in empty space

I'm trying to modify the default bootstrap blog template in order to add a small image next to the title. I managed to add the image with margin-left:auto; but now the text won't go under it and only uses half of card: .blog-header { line-height: 1; border-bottom: 1px solid #e5e5e5; } .blog-head...
iamroot
1

votes
2

answer
47

Views

Flex to ignore side margin when centering elements

I am having trouble getting flex to center elements (with margin) when it wraps. It looks perfect when the screen is wide But it is not centering it when it wraps (because of the right-margin of the first button) Here is my code: https://jsfiddle.net/dLz7120k/2/ footer { display: flex; flex-flow: ro...
Aximili
1

votes
2

answer
18

Views

Height of Flex Div Not 100%

I have the body full height, but the containing div with a min-height of 100% does not fill. I'd like the blue to fill it's body container and flex align the internal divs. https://codepen.io/steventnorris/pen/oVdKqY html { min-height: 100%; width: 100%; } body { min-height: 100%; width: 100%;...
steventnorris
3

votes
2

answer
25

Views

CSS Grid autowrap aside when it gets to a certains size

So I am creating a layout where I have a content goes here aside content I want the aside to be a quarter of the width and to automatically wrap to below the main once it hits a certain size and the main to take the full width. I know I can do this with media queries but people are saying that it c...
Murray Chapman
0

votes
0

answer
14

Views

Flexbox styling some callout text

I am trying to style some callout text using Flexbox. Hopefully, the following words can describe the visual intent. I have a mobile layout which is going to be a blog post. The typical text is just a standard style. For certain portions of text (perhaps an important paragraph) I want to style this...
markthekoala
0

votes
2

answer
23

Views

Flex items to two rows when necessary

This might not be possible to do strictly with flexbox or it may require some media queries. I'm fine with that. I'm wondering if there is a way to have four items arranged horizontally in one row that will responsively switch to two columns both with two items. I've tried various things to do this...
Explosion Pills
2

votes
2

answer
47

Views

CSS: Is it possible to achieve the following layout?

Is it possible to achieve the following responsive design layout shown in the image below using CSS3 Flexbox? I am able to achieve the desktop layout using the code below. However, I can't think of a way to make div #div3 and #div4 fill below #div1 and #div2 EDIT: I'm sorry that I forgot to mention...
Eng Zer Jun
1

votes
1

answer
14

Views

Flexbox - display both header and footer

Just starting my flexbox journey. I have a very simple layout that I wish to style for mobile. They layout has the following structure: lots of text here I want to display both the header and the footer at the top and bottom of the page respectively. The article will contain too much text to displ...
markthekoala
0

votes
5

answer
224

Views

justify content flex-end not working for IE

Flex-end working for chrome and firefox, but not working for ie, go through following code .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; flex-direction: column;flex-flow:column; justify-content: flex-end;height:100px } Flexible Boxes 1 2 3 4 5 6...
Sarabjit Singh
3

votes
0

answer
43

Views

Flexbox. Calc a font-size to fit text on both single text line and multi-line flex items

I have a 100vh flex container, direction column. Below it I have a dynamic number of flex items with the same height. This flex items alltogether take all vertical space: 1 2 3 4 and css: ul { display: flex; flex-direction: column; height: 100vh; } li { flex: 1 1 auto; } The items contain text. And...
Jaume Mal
4

votes
0

answer
17

Views

How to reproduce CSS flex-grow space distribution behavior in a Flutter Row/Column?

I have a Row that looks like this: SizedBox( height: 64, child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: Container( color: Colors.blue, child: Text('looooooooong', softWrap: false))), Expanded( child: Container( color: Colors.green, child: Text('short', softWr...
Tobias Marschall
0

votes
0

answer
4

Views

Align flex inside another flex

I'm trying to create a mobile layout with a logo on the left nav in the middle and a chevron to display and hide the items of a navbar(I'm not interested in doing this functionality right now). But right now I'm trying to achieve something like this: +------+---------+---------+ | logo | lorem | c...
Alexei Rodriguez
-1

votes
1

answer
16

Views

Should I use Flexbox or CSS Grid? [duplicate]

This question already has an answer here: What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid? 3 answers I know this is not a new question but I didn't find a strong debate yet and I would like to hear your opinions. So, I want to do a simple component with...
João Saro
-1

votes
0

answer
11

Views

boostrap 4 card footer does not display properly (using flex)

I have this card footer : The problem is that it does not display properly on iphone 7 (using chrome on it). I have this display on the iphone : What is weird is that it shows correctly on chrome desktop using the 'toggle device toolbar' (to see a preview of the card on iphone 7, but on the desktop...
zskiredj
1

votes
1

answer
1.4k

Views

height:auto? height:initial? or height:inherit?

I have a small question: I have an element whose height is fixed to height: 50px; I put a media-queries when the device is lower than 600px, this same element has a height that adapts to the behavior of its children, which are in flex-wrap: wrap, What would you put this parent in: height: auto ? Hei...
Michael Boucher
1

votes
3

answer
452

Views

Easiest way to select all elements of a Flex Container? [duplicate]

This question already has an answer here: Select all child elements recursively in CSS 2 answers What is the easiest way to select all child elements of a flexbox container and give them all the same margin for example? Example: Headline Some Text Some more text Some small text
Roland
1

votes
3

answer
42

Views

Optimizing flexbox CSS code for different widths

The code snippet below technically achieves the goal of having a footer that has layout for wide and small screens as seen in the images below. My question, am I using flex box correctly? Is there a more optimal way to achieve the desired result as seen in the images? I ask as my css feels verbose a...
AnApprentice
1

votes
4

answer
528

Views

Expanded accordion list items to stay in flex columns

In the demo below, there are two columns with list items and when I click on the #6 li in the column #2, the #5 li jumps to the column #1. Is there a way to make sure all 3 lists to STAY in the column #2 when clicked? $(function() { // (Optional) Active an item if it has the class 'is-active' $('...
Christian Luneborg
1

votes
1

answer
1.6k

Views

Why can't I center an inline flex-item?

I'm creating navigation bars using flexbox and ran into this particular issue when trying to create buttons out of anchor tags (i.e. link in the centre of a box). I have the li set to display flex so I can centre the a, but as soon as I give the a some height, the a aligns to the top-left. Is there...
anark10n
1

votes
1

answer
577

Views

Why does bootstraps d-flex class stop my div from stretching 100% width?

I've got a div wherein I want two elements to set side by side: a search input field and corresponding search submit button. So far I've tried to accomplish this with the following code: Class20 Search Log In Sell your stuff The d-flex does what I want. It puts the search field and the button...
A. Eakins
1

votes
1

answer
23

Views

Why does inserting intermediate non standard elements in the DOM break flex boxes?

I witnessed this with Angular JS directive-elements, but here is a minimal reproduction code: OK code (the parent div width is 30rem) : div { display: flex; padding-top: .5rem; } .parent { flex: 0 0 30rem; background-color: BlueViolet; } .child { flex: 0 0 15rem; background-color: DeepSkyB...
Lucas Cimon
1

votes
1

answer
33

Views

CSS Flexbox behaviour

My question is simple. I've got a title on the left (dynamic, it can be much more longer) and next to it an empty div which has just a border-bottom and height properties. Here is a fiddle for example: http://jsfiddle.net/KCarnaille/apk36s0n/4/ I want my .empty-div, using flexbox properties : width...
KCarnaille
1

votes
1

answer
2k

Views

Angular Material layout nested flex rows inside of flex columns do not divide space as expected

I am trying to layout my window so that the outer div fills the height of the window. It should be divided into two columns: 65% on the left and 35% on the right. The right column should be divided into three rows: the top one is flexible, the middle one should be 15% and the bottom one should be 20...
JBCP
1

votes
2

answer
116

Views

Why my navigation container not has the same height as logo and search container

I'm doing some practise with flexbox because I want to know how it works and how is to work without using floats, display inline or block and so on, but I'm having a problem and I don't know how to solve it. I have the header section with three containers: logo, navigation links and search. The cont...
abaracedo
1

votes
2

answer
1.2k

Views

Flex Box and responsive aspect ratio issue in Firefox

I am using the flex box model for the layout of my website to display a set of images. These images all have a different aspect ratio so in order to have them all have the same ratio I am using this technique. It works fine on all browser except firefox, where the height of the divs collapse. The pr...
pessimo
1

votes
3

answer
806

Views

HTML display 2 items in one row with a fixed width without break

My question may be simple but I don't get it working. I want to have 2 inputs in one row. So lets say we place it inside a div and give this div a width of 20%. Now the two inputs will calculate the size and will make each 50%. The problem is that the div will set a break. If I place them inside a s...
Tom el Safadi
1

votes
2

answer
4.9k

Views

Why does my website looks different in chrome and firefox than it does in Safari using flexbox?

I am new to HTML and CSS and have very basic knowledge of both. I am creating a test website and used a tutorial from Treehouse for part of it. I wanted to use flexbox for the layout. I have created the website, and it looks like I want it to on a smartphone, it's one single column, but when it move...
khanivore
1

votes
1

answer
71

Views

How to make text overflow and overlap another div?

I'm making a interactive periodic table of elements and I've run into an issue. In my example below the Potassium and 39.0983 is below 2,8,8,1 that is in a separate div. I need it so that the numbers 2,8,8,1 overlay above Potassium so that it doesn't push it down. .base { margin: -1px; height: 75p...
CodeBreaker

View additional questions