FAQ Database Discussion Community


Flexbox vs GSS: How to make an unknown number of elements span their container equally

javascript,css,flexbox
I have been playing a bit with GridStyleSheets, but having trouble getting an unknown number of elements in a container to have equal widths, equal spacing and span their container. I have been able to achieve this with Flexbox, but having trouble achieving the same result with GSS. I created...

Chrome display issue with flexbox and overflow

css,google-chrome,flexbox
I'm using flexbox to do a straightforward header/body/footer layout. However, when my "body" has lots of content (enough to force a scrollbar), I'm seeing an issue in Chrome: it forces the header and footer elements to shrink when they shouldn't be. This only happens in Chrome (IE11 and Firefox work...

Flexbox children does not respect height of parent with flex-direction column

css,flexbox
The general idea is to have 2 rows of equal heights and the first row contain 2 columns of equal width for a full page layout. The problem I'm running into is that when one of the cells fill up with children elements, the parent row's height expands overtaking the...

Multiple flexboxes with margin-right, except the last one in the row? Without JS?

html,css3,flexbox
See the following image: Current setup is at top-left. If I add more red boxes, they will wrap to the next line, leaving a 10px right margin of the last red box on the first line. My question: Is there any way to get the top-right example, as well as...

AngularJS material mobile layout not responsive

angularjs,responsive-design,flexbox,angular-material
I am trying to make a responsive website and the issue that I am having is the mobile version just looks like a super tiny version of the desktop. <body ng-controller="body" > <div layout="column"> <div flex> I'm above on mobile, and to the left on larger devices. </div> <div flex>...

Fixed positioned footer but also part of element flow with Flexbox

css,flexbox
I am playing around with Flexbox, but have run into trouble with the following document structure <div class="parent"> <div class="child A"> <div class="top-section"></div> <ul class="main-section"> <li></li> ... </ul> </div> <div class="child B"> </div> </div> I want child B to always be fixed at the bottom of the screen, and have...

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

css,css-position,flexbox,absolute
If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here: This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as...

How to make menu items appear horizontally in a flex box

css,flexbox
Here is the HTML5 code in question: * { margin: 0; padding: 0; } h1 { font: bold 20px tahoma; } h2 { font: bold 14px tahoma; } #big_wrapper { border: 1px solid black; width: 1000px; margin: 20px auto; text-align: left; } #top_header { padding: 20px; background: yellow; border: 1px...

New version of Google Chrome css display: flex issue

css,google-chrome,flexbox
After Google Chrome was updated, my issue started reproduce. The problem is that I can not set fixed height to child element (with so many children inside, that scroll appears) inside flex container. Here is code on jsfiddle. By the way, setting min-height instead of height solve this problem.

Ellipsis inside Flex item

css,flexbox
I have a layout based on flexbox. Two columns, one fixed size and the second need to take all space. In the grow column I have a string that I want it to be ellipsis. In Chrome it works fine. In IE and FF its not working. I tried to...

overflow: auto in nested flexboxes

css,html5,flexbox
I'm currently experimenting with flexbox layouts and have a problem, that overflow wont get applied, when I nest multiple flexboxes. As long as I just use one level of flex boxes (see example 1), everything works fine: As soon as its content exceed the given space, scrollbars are applied to...

Flexbox: text item `font-size: 0' and taking up space

html5,css3,font-size,flexbox
div { display: flex ; font-size: 0 ; justify-content: space-between } div > a { font-size: 10pt } ­ <div> Banana <a>Meat grinder</a> <a>Phone</a> </div> Live Why does the Flexbox text item take up space when its font-size is set to 0? Is there a way around it, e.g. selector...

Prevent item from shrinking

html,css,flexbox
I want to make a simple popup with variable height which will vertically centered in case it is smaller than viewport and will not be shrinked when it bigger than viewport. Here is sample code: .flex-container { height: 100%; display: flex; flex-direction: column; justify-content: center; } .flex-child { flex-shrink: 0;...

Image inside flex-item ignores max-height:100% in chrome and firefox - (works in safari)

css,css3,flexbox
I want an image to fill either the width or height of the window-size/viewport. For a better understanding of what i’m trying to do, i’ve created an example on codepen - please check out and resize the preview. It works fine in safari but chrome and firefox seems to have...

replacing css “display:none” value with "display:flex using js

javascript,css,flexbox
i'm attempting to replace a css value "display:none" defined on a div by a "display:flex" using js property .css(). When doing so, safari on Ipad ignores the js instruction (i used the prefixes for cross browser compatibility + tried css !important) and instead it applies "display:block" which is the user...

breaks out the layout

css,html5,layout,flexbox,doctype
I have the following simple html code for a simple template: <!DOCTYPE html> <html> <head> <title>My new website</title> <meta name="description" content="Simple website styled using flex box layout"> <meta http-equiv="refresh" content="60"> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> <div class="mainContainer"> <nav class="mainMenu"> <ol> <li> <a href="#">Home</a> </li> <li> <a...

Flexbox max-height interpretation change on Chrome

css,css3,google-chrome,flexbox
I have some code which currently renders properly on Chrome Stable. I have received reports of the code working incorrectly on Beta and Dev and I am able to reproduce the issue on Canary. I found this PSA which appears related to my issue. So, I am working under the...

Create a two column layout that fits to content with Flexbox

html,css,flexbox
I have a two column layout. Column 1 is a heading. Column 2 is a list. I want the columns to fit to content. (e.g. Column 1 should be as wide as it's contents) I also want the list to be horizontal. I want to use Flexbox, so I can...

Setting overflow: scroll on a table with display: flex

html,css,css3,overflow,flexbox
I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

css,css3,flexbox
I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in...

CSS Flexbox Centering Horizontally Issue

html,css,css3,flexbox
I have a flexbox container containing 2 div items. The flexbox container is setup for a row that centers the content inside. I am trying to figure out a way to center the contents of the row on the first item, and then have the second item be to the...

Change flex direction on wrap

html,css,responsive-design,flexbox
I am trying to use a nested flexbox layout in order to achieve the following layout when there is a certain amount of space: Then, when there isn't enough space, the right-hand side should wrap to a row layout instead of a column layout, so that the boxes are side-by-side...

IE 10 Flexbox height bug?

html,css,internet-explorer,internet-explorer-10,flexbox
I am unable to figure out why IE10 adds extra margin's or height to the green element below. http://jsfiddle.net/q4ofmfar/ Expected style as displayed by most browsers: Incorrect style as rendered by IE10.0: http://jsfiddle.net/q4ofmfar/ HTML <div class="row"> <div id="box1"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus vehicula...

Flexbox column heights

css,cross-browser,flexbox
I have this site: http://kudos-topspindigital.azurewebsites.net/#/netball If you open this in Chrome and IE you will see my issue. Basically in chrome, the right panels are around equal heights. I would like the bottom panels (the orange and dark gray one) to be twice as height as the top light gray...

How to sync heights of cousin html elements

html,css,html5,css3,flexbox
So I have the following jsFiddle: https://jsfiddle.net/4vpnLh52/4/ Which looks like this: .myRow{ display: table; overflow: auto; } .myGroup{ display: table-cell; position: relative; max-width: 60px; } <div class="myRow"> <div class="myGroup"> <div id="label1" class="myLabel myCell"> LAbel 1: </div> <div class="myInput myCell"> Input 1 </div> </div> <div class="myGroup"> <div id="label2" class="myLabel myCell"> Label...

Implementing a “Mondrian” pattern using Flexbox

css,responsive-design,flexbox
The article 5 Really Useful Responsive Web Design Patterns describes a "Mondrian" pattern for layout on the web that arranges one large box on the left (2/3 or 3/4 width) with a few smaller items, stacked vertically on the right — but then in medium-sized viewports, the design shifts to...

Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

css,flexbox,modernizr
I am using Modernizr v3 on my website to test for flexbox support. Modernizr adds a "flexbox" body class for browsers that support it, and "no-flexbox" for browsers that do not. As browsers that don't support flexbox are only a minority of my audience, I have used the "no-flexbox" class...

Creating dynamic html table without using 'table'

javascript,jquery,html,css,flexbox
I need to create an html tables without using the table tags or css display:table(and same) properties. I wrote this html code <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Creating div tables</title> <link rel="stylesheet" type="text/css" href="flex.css"> <script type="text/javascript" src="jquery-1.11.2.js"></script> </head> <body> <div class="tbl"></div> <script type="text/javascript"> for (var i = 0; i...

Flex inside flex doesent work in Firefox 38

css,firefox,flexbox
I try to use flex in firefox, it doesent work, in Chrome, it works like a charm! Here is the result in Firefox: And here is how it looks (should look) in Chrome/Opera: What is the problem? Here is the CSS, that doesent work on Firefox: .jawcontain {display: flex;flex-direction: column;justify-content:...

Make div go to the bottom without overlapping previous div's content

html,css,flexbox
I have the following example: fiddle: http://jsfiddle.net/yisera/yLty3552/2/ Pen: http://codepen.io/yisera/pen/KpzbQp Where I have a flex grid and I have elements that are also display:flex;. The problem I have is that the div.card has another div, div.od-card-action which has the actions of that card, comment, upvote, downvote. However, whenever the content of...

Targeting the last div before flexbox or float wraps the rest

html,css,css3,css-float,flexbox
I am wondering if there is a CSS selector that would auto-magically target the last div on a row created by either flexbox or floats. In our particular use, we have an image grid with different width images. In its full width, there are rows with 3 images (each 33%)...

Flexbox does not seem to work in IE

html,css,internet-explorer,flexbox
For a website, I am using some flexboxes. Those boxes work perfectly in all browsers, except in IE. I'm going to give you a simplified version of what I'm doing below: <div class="row-fluid vertical-align text"> <div class="col-xs-16 col-md-8 leftText"> Some textblock, which has a 10 lines </div> <div class="col-xs-16 col-md-8...

Scrollbars and flexbox min-width bug on chrome

html,css,google-chrome,flexbox
I'm having issues with a quirk in the way scrollbars are interacting with flexbox in Chrome. It doesn't happen on other browsers for me. HTML: <div class="outer"> <div class="inner-left"> <div class="one"> <!-- content one --> <div style="height: 200px;"></div> </div> <div class="two" style="min-width: 400px;"> <!-- content two --> <div style="height: 200px;"></div>...

Flexbox - align : center / justify : center with unknown height

html,css,css3,responsive-design,flexbox
I am trying to split the page into 4 equal squares with centered content. The issue I am having is centering the content due to the .flex-item divs having a viewport height, I am looking for a full flexbox solution, Thank you. I have tried the following from resources: justify-content...

CSS height: 100% not working in html or body

css,twitter-bootstrap,flexbox
I'm trying make some content in my page fill up all the remaining screen size. My page has a header and the content is two divs, both needing to be scrollable. I've tried a few solutions and the best I've come up with is using Flexbox and using CSS calc...

Building Grid with Flexbox - Items in second row only on right Side [closed]

css,html5,css3,css-float,flexbox
i want to build my Grid with Flexbox and get stucked a little bit. It is a 4-Column Grid. In the Second Row i only want to place 2 Items on the right Side. Just see my Scribble. ...

How to style radio buttons differently if they fit in a single row?

javascript,css,html5,css3,flexbox
PLAYGROUND HERE I'd like to style radio buttons differently if they fit in a single row. For example: The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal radio buttons. The second container has enough space. Therefore,...

CSS Flexbox for 2-column and 3-column on desktop and mobile (wrap)

css,flexbox
I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout. 2-Column: This, I think, may be pretty straightforward 3-Column: This is probably a bit more advanced The container class is, well, .container, and...

Flexbox layout, push content when opening sidebar?

flexbox
So here is a picture reference for this question: What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the...

Wrap text in stretchable tables

html,css,css3,flexbox,word-wrap
I have two tables on either side of a centered div. I'd like the content in the left-hand table to be aligned on the right, and the content in the right-hand table to be aligned on the left. I managed to do so by creating an extra column in the...

React Native and Flexbox Views

css,flexbox,react-native
I'm trying to have a TouchableHighlight + View above this list of generated comments. I can't seem to bring the start of the comments closer up to where the TouchableHighlight ends (it ends right after the text, no padding/margin below). Here's the relevant JSX: renderListView: function() { return ( <View...

Nesting flex box

css,performance,responsive-design,frontend,flexbox
I find flex box really useful, and since I discovered it I am tempted to use it everywhere. Question Is it a good practice to nest flex-boxes? Does having a lot of them and especially nested ones has an impact on performance?...

Flexbox: Single Column to Stacked Multi-Column

css,responsive-design,flexbox
I encounter this layout issue a lot: Small screens - items are stacked in a single row, usually an image followed by some text, then a smaller sub-area for extra miscellaneous: Medium screens and up - items are reshuffled to 2 columns, image and misc stuff on the left, text...

Centering Elements Vertically with FlexBox

css,flexbox
Attempting to use FlexBox (for demo purposes only). However I'm having trouble vertically centering text within the parent .top-nav-bar. Using justify-content: space-between I'm able to get the 2 elements where I need them horizontally, however I'm having no luck centering .contact and .help vertically within .top-nav-bar. All attempts to do...

How to display list items as columns preserving the left-to-right order?

css,list,multiple-columns,flexbox
Is it possible in pure CSS to lay out list elements to arbitrary number of columns, preserving the left-to-right order, as on this example? ...

CSS Flexbox: shrink along cross axis and show scrollbar

html,css,overflow,flexbox
On my website I have a flexbox container with an image in it (fixed width and height) and a text beside it(no fixed width). How can I prevent the text being from being higher than the image and show a scrollbar when it's higher. Please see also code snippet below....

Css flex box make the second element centered

html,css,flexbox
I have simple layout that i need the h3 in the left side and the nav in the right side but at center, i want to do this with flex box but i does not know how to make the nav to be centered on the right. In regular grid...

how to adjust n amount of divs inside a flex container

html,css,flexbox
I have the following pen: http://codepen.io/yisera/pen/eNprye Which what it is trying to do is adjust many div elements around the main container. However, I would like to achieve this in a way where after certain amount of divs are placed in the same row, the others are pushed to the...

Identify the last flexbox of first Row and first flexbox of last row

jquery,html5,css3,flexbox
In the given code I need to identify the last element of the first Row and First element of the last row. Just to make it round from all corners. How can I do that? I need to mention here that the column no will vary as well as the...

How to justify ul list without blank space and text hidden?

css3,flexbox,justify
I have an UL that I want to justify. #main { width: 100%; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ display: flex; list-style:none; } #main li { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; text-align:center; } HTML: <ul id="main">...

Why using flexbox in container can prevent extra space of inline-block

html,css,flexbox
When I use inline-block, I meet space problem. As many solutions propose here The solution that I liked best is using FlexBox. Just simple, we just add display:flex in container. As example below: .flexbox { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD -...

CSS flexbox width 100% Firefox

css,firefox,flexbox
I'm having an issue with this scenario in Firefox. #pager takes the width of its children. However, in Chrome, it takes the width of its parent. How can I make #item-list respect the width of its parent in Firefox? take a look! https://jsfiddle.net/owmpatbh/2/ HTML: <div id="wrapper"> <div id="sidebar"></div> <div id="main">...

CSS: Flex items are overlapping each other

css,flexbox
I created a website with several div containers (Events, News, Interviews). I want the containers to show up beneath each other. To make this possible I used display: flex and position: absolute on the flag class, but this does not seem to work. When I removed position:absolute from flag, and...

Css Flexbox Navbar Right Align

html,css,css3,flexbox
basically what I am trying to do is to implement a navigator in css without using float/clearfix. Instead I am using a better approach, css3's flexbox. I know it's simple to align items to the left easily but what's the optimal solutions for having a narbar which has two aligned...

Position menu bars to left of aside, without affecting other elements

jquery,css,flexbox
Here is the the jsfiddle: http://jsfiddle.net/nh23g40n/46/ Why does it require we post code if we provide a fiddle...whats the point.. Hit the animate button if you cant see the white menu bars. Basically, I want the menu bars to be slightly left of that yellow side bar, and animate with...

How to install flexbox?

html,css,flexbox
I'm very new to programming and I noticed someone mentioned flex box. After reading a lot about it, it seems like something that would prove useful to me. The only problem is that I'm having a lot of trouble installing it, even after searching for about an hour for help....

Flexbox Columns: Vertically Aligning the Last Element

css,flexbox
I have an unequal amount of content in three flexbox columns, but I want the buttons that appear at the bottom of each column to line up. How can I do this? The code I'm using (Demo) .container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content:...

Flex css layout with fixed and variable elements

css,flexbox
I am hoping to create the following layout in pure CSS. I know that I can achieve this with a JavaScript solution, but a CSS solution would be much cleaner, if it is possible. I have created a jsFiddle which I know is incorrect, to provide a starting point. The...

Img inside Flexbox responsitivity issue

html,css,responsive-design,flexbox
I have fragment of code with flex div, and an img inside it: html, body { height: 100%; margin: 0; } .container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: black; } .item { max-height: 100%; max-width: 100%; } <div class="container"> <img src="http://i.stack.imgur.com/aHBI2.png" class="item"> </div> On...

Flexbox call not working

html,css,html5,css3,flexbox
I've got a footer that I'd like to organize horizontally with the flexbox space-around alignment. For whatever reason, the li items in this footer collapse vertically when I attempt anything other than display: inline-block; #footer { width: 75%; background: rgba(0, 0, 0, .5); height: 150px; position: absolute; bottom: 0; }...

How does flex's order decide how things should be ordered, if elements have the same order integer?

html,css,css3,flexbox
Situation is as follows: <section class="filters"> <ul> <li>Color: <ul> <li style="order: 4;">Red (4)</li> <li style="order: 4;">Blue (4)</li> <li style="order: 0;">White (0)</li> <li style="order: 2;">Gold (2)</li> <li style="order: 1;">Purple (1)</li> <li style="order: 2;">Pink (2) </li> <li style="order: 2;">Silver (2)</li> <li style="order: 0;">Black (0)</li> <li style="order: 0;">Brown (0)</li> <li...

CSS Flex - Filling empty space with divs

css,css3,flexbox
I am the furthest from a designer and as such look to others for visual design. I have made purchase of a template where the designer used a min-height: 1000px attribute on the main container to ensure that the background colour always stretched to the bottom. I am trying to...

Can flexbox horrizontally and vertically center images without streching them?

css,flexbox
I want to make images centered horizontally and vertically inside their containers. And if their width or height is greater than their containers' width or height, then make them automatically shrink while keeping their proportions. The following CSS code is what I use on the container to try to achieve...

How to prevent overflowing flexbox without giving explicit sizes

html,css,svg,flexbox
At a certain browser size ratio, this codepen looks like the image below. At wider browser widths, the svg (vertical green lines with text "Top" and "Bottom") on the right overflows its flexbox off the top and bottom. I've tried various permutations of width/height: auto/100%/min-content on the various flex items,...

Can flexbox be used to “pack” items in a list?

css,flexbox
Using flexbox, and based on the following markup, is it possible to get the last item in the list to visually move up and "pack" itself into the available space? I know this could be accomplished with different markup (3 columns and items within each column), using either floats or...

Flexbox and Angular material tabs

css,flexbox,angular-material
I'm trying to use a flexbox inside a tab-body but there's some issue when setting the max body tab's height to 100% Here's what I'm trying to achieve: http://plnkr.co/edit/r8yCblnMev7ZD4VBcJlQ?p=preview <div layout="column" layout-fill style="height: 100%;"> <div flex="33" style="background-color: blue;"> block1 </div> <div flex="33" style="background-color: yellow;"> block2 </div> <div flex="33" style="background-color: green;">...

Lines between a text/divider

css,css3,flexbox
I'm playing with flexbox and I found this on codepen, and I was wondering, how can I put this vertically? I tried to change the border to top and bottom, but it disappeared. HTML: <div> <h1>Hello World!</h1> </div> CSS: h1 { color: #444; font-family: sans-serif; font-size: 2.625em; text-align: center; padding:...

flexbox cross browser issues chrome displays correctly firefox does not [duplicate]

cross-browser,flexbox
This question already has an answer here: How can I get FF 33.x Flexbox behavior in FF 34.x? 1 answer Trying to debug flexbox cross browser issues. I have a basic holy grail layout with scrollable content with fixed headers and a off-canvas left nav. The layout displays correctly...

CSS3 Flexbox spacing between items

html,css,css3,flexbox
Being somewhat new to Flexbox (although experienced in CSS), it seems to me that one thing conveniently "glossed over" by most tutorials I've read is the spacing between flex items. For example, one of the most cited tutorials is this one at CSS Tricks. It's very good and has been...

Angular-material: md-select moves container element

css,angularjs,flexbox,angular-material
Here is the jsfiddle It seems like the md-options are colliding with the body margin when the layout-margin directive is applied. The HTML: <body style="background-color: orange;" layout="row" ng-controller="AppCtrl" ng-app="StarterApp" layout-margin layout-fill> <div flex="35" class="md-whiteframe-z1 white"> <md-select placeholder="Pick" ng-model="someVal"> <md-option value="1">One</md-option> <md-option value="2">Two</md-option> </md-select> </div> </body> How can i avoid this...

Issues with FlexBox Justify Property

css,css3,flexbox
I have problems with implementing justify content using flexbox. The .help and .main-nav classes should be up against the right of their containers when using justify-content:space-between/around. CodePen I'm getting this odd behavior after wrapping the children in a container DIV for centering purposes, and now justify-content doesn't work....

css determine single and multiple images in one container

css,image,css3,responsive-design,flexbox
I'm currently building a blog and have an image container for each blog post, as you do, which may only contain one or may contain multiple images. I've been googling for a while to try and find a css only solution to handling my scenario: if i have one image...

Flex box bug with max-height in chrome v43

html,css,google-chrome,flexbox
I have the following construct to render a simple layout with fixed header and footer and a flexible body that with scrollable content: http://jsbin.com/jokevuyave/1/edit?html,css <div id="main-view"> <div class="rows"> <div class="head">header</div> <div class="main scroll"></div> <div>footer</div> </div> </div> and this are the styles: .rows, .columns { display: flex; flex-direction: column; box-sizing: border-box;...

How make flexible blocks without flexbox for old IE

css3,cross-browser,internet-explorer-9,flexbox
There is a question about simple form, with input and button, Цe need a block filled 100% of the available space inside the box in which there may be other elements, without their wraps. This is easily done with the flexbox, but it does not support IE 8-9. Please help...

Flexbox flex-wrap not working

html,css,flexbox,wrap
I can't seem to get flex-wrap: row wrap to work in the following code. The images just flow over each other instead of wrapping into new rows. What am I doing wrong? I'm using the latest version of Chrome. You can see the codepen here: * { -webkit-box-sizing: border-box; -moz-box-sizing:...

Padding trick aspect ratio element - Vertical centering

html,css,css3,website,flexbox
I'm trying to vertically center an element which uses padding-bottom to create the required aspect ratio (for a video). I want to have top and bottom black borders just like when a movie is displayed on a taller aspect ratio than it was filmed on: body{ padding:0; margin:0; position:relative; display:block;...

How to make a HTML5 canvas fit dynamic parent/flex box container

javascript,jquery,html,css,flexbox
Is there a way I can create a canvas inside a dynamic re-sizing flex-box container? Preferably a CSS only solution but I think JavaScript is required for redraw? I think one solution could be to listen to the re-sizing event and then scale the canvas to meet the size of...

Flexbox equal-height elements, with dynamic height, without specifying a height or ratio

css,css3,flexbox,equal-heights
I'm not sure Flexbox can do this, but it seems to be getting close: http://codepen.io/timkelty/pen/XbKzaQ .Nav { display: flex; max-width: 700px; background: whitesmoke; } .Nav-column { width: 33%; padding: 0 20px; display: flex; flex-direction: column; } .Nav-hdg { margin: 0 0 10px; display: flex; align-items: center; flex: 1; } .Nav-content...

CSS Flexbox images not preserving aspect ratio

html,css,flexbox
I'm trying to learn to use Flexbox. I have a page with two images separated by a bar in the middle, stacked top to bottom. I want the bar to stay the same size regardless of the browser and the two images to resize when the browser shrinks (keeping the...

Flexbox not providing intended margins

html,css,html5,css3,flexbox
My list is (somewhat) successfully calling flexbox's space-around alignment, except the first-child of the footer list in question has a relatively larger margin on it's left. Cannot figure this out and would rather not risk its future with a cheat. Here's the code; any input helps, thank you: #footer {...

display flex doesn't work on summary tags in Chrome?

html,css,google-chrome,flexbox
I have a display: flex on a <summary> tag with some child <p> elements. It should arrange them in a row, right? and it does, but only in Firefox. Not on Chrome (43.0.2357.81). Is it just me? http://jsfiddle.net/laggingreflex/5e83uqf9/ summary { display: flex; flex-flow: row wrap; } summary h3 { display:...

Flexbox: how to get divs to fill up 100% of the container width without wrapping?

css,css3,flexbox
I'm in the process of updating an old inline-block-based grid model I have to a newer Flexbox one I created. Everything has worked fine, apart from one little snag, which has become a bit of a dealbreaker: I have a bunch of CSS-controlled sliders; so there's a containing wrapper with...

Problems with transition on flex: 0, but still working on flex: .0001?

css,transition,flexbox,value
While working on a little project, I stumbled into having to transition from flex: 1to flex: 0. It took me a while to understand that it was only for this that the result was broken. After testing a bit I've found out that flex is transitionable, but not if one...

flexbox height or big image background

windows,height,flexbox
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo...

How to “skip” div in HTML tree when using Flexbox?

html,css,flexbox
I am trying to use Flexbox on an existing site, and I need to somehow tell the browser to "skip" several divs in the tree. Let me explain on a simplified example. I have a HTML like this <body style="display: flex; min-height: 100vh; flex-direction: column;"> <div id="want_to_skip"> <div style="flex: 1;">...

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

How do I nest polymer layouts to fill complete page?

polymer,flexbox
I am trying to use polymer layouts in polymer elements, but I am unable to determine how they are supposed to be nested correctly. I use body on fullbleed - this works correctly (grey area in example). Then I add a polymer element my-element (horizontal layout), and inside that another...

Flexbox: Two column layout with large child element - Works in Chrome but Not Firefox/IE

html,css,flexbox
I have a 2 column flexbox layout. The first column has a child element (an image) that is quite large. The reason it's large, is so it looks good on Retina displays. The image use max-width:100% to scale. In Chrome the layout works fine. But in Firefox/IE, the image breaks...

flex-wrap not working as expected in Safari

css,flexbox
On the homepage of http://www.shopifyexperte.de/ there are two flex-box modules, one under "Kundenstimmen" and one under "Neueste Beiträge...". The inner boxes are supposed to wrap when they go below 220px and not grow above 30% width. This works in latest Chrome, FF and Opera (all on Mac), but in Safari...

CSS: Full width flex column doesn't stack on top of each other on webkit

html,css,webkit,flexbox
I have two divs in a container like this: <div class="container"> <div class="div-a"> Hello </div> <div class="div-b"> Lorem </div> </div> And I have set the container to display:flex and flex-direction to column. I aim to align the 2 divs on top of each other. This works fine on Firefox but...

How to make bootstrap grid columns span full height of screen

jquery,html,css,twitter-bootstrap,flexbox
I'm trying to make a responsive "app" screen for a webpage with a material design library. The app screen is required to fit the page and no more on essentially a tablet screen. I have nested div's within the row elements which use flexbox and work perfectly(distribute space and fit...

Building Grid with Flexbox - How to setup multiple Items / Divs beside and down each other?

css,html5,css3,css-float,flexbox
i want to build my Grid with Flexbox and get stucked a little bit. How can a set a Box and towards on right Side multiple Boxes with half the Size of Box 1. Box 2-5 should then float towards Box 1. See in Scribble what i mean and how...

CSS3 Flexbox maintain image aspect ratio

html,css,css3,flexbox
Using the CSS flex box model, how can I force an image to maintain its aspect ratio? JS Fiddle http://jsfiddle.net/xLc2Le0k/2/ Notice that the images stretch or shrink in order to fill the width of the container. That's fine, but can we also have it stretch or shrink the height to...

Multiple flex items next to eachother, fill out container

html,css,flexbox
I have a container with 3 items in a row. The items are less wide than the container it sits in. I want the three items to fill out the container. This is because when I downscale my browser width I'd like the items to jump to 2 or 1...

CSS flexbox wraps content in FireFox (not Chrome)

css,google-chrome,firefox,flexbox,pseudo-element
I have a button that consists of an <i> and an <span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a...

CSS display: flex, align-center and button with checkboxes

html5,css3,flexbox
There is a flex box with buttons and a label inside. Apparently align-items property does not align buttons. How can I achieve that? https://jsfiddle.net/elaman/4uyggo7s/ <div class="wrapper"> <div> <button>Test</button> </div> <div> <input type="checkbox" id="test" /> <label for="test">Test</label> </div> <div> <button>Test</button> </div> <div> <button>Test</button> </div> </div> CSS .wrapper { display: flex; }...

Center link in an unordered list element (flexbox)

html,css,html-lists,flexbox
I've been playing around with flex box and I would like to center the "Logo" test in the upper left corner vertically in its blue container. You can see it here: http://codepen.io/TimRos/pen/MwKNgw * { margin: 0; padding: 0; } .box { color: white; font-size: 80px; text-align: center; text-shadow: 4px 4px...

Flexbox non-sibling grandchildren

html,css,flexbox
Here's an example of what I'm trying to accomplish. Basically I want a DOM structure like this: <div class="parent"> <div class="child"> <div class="grandchild flex-3"> Wide Grandchild </div> <div class="grandchild flex-1"> Narrow Grandchild </div> </div> <div class="child"> <div class="grandchild flex-2"> Medium Grandchild </div> </div> </div> But I want the grandchildren's flex...

How to set a fixed width column with CSS flexbox

html,css,html5,css3,flexbox
CodePen: http://codepen.io/anon/pen/RPNpaP. I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the css inside the @media all and (min-width: 811px) {...} to .flexbox .red { width: 25em; } but when I do this, this...

Random image on page load as Jumbotron background

css,flexbox
I am trying to get the following code to load a random image for a jumbotron background without success. I just can't tell which part is the problem. The jumbotron itself is acting as the area for a basic flex slider. I basically want the background image for the flex...