spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Equal height Flexbox columns in Chrome


To create two equal columns using Flexbox:

  • The parent container gets display: flex

  • Each column is created by a div and they get flex: 1 to grow / shrink

To stretch the child of the first column:

  • The first column is also given display: flex so that its children can have flex properties and grow

  • The aside child is given flex: 1 and will grow / shrink

This is the easiest guide to Flexbox you could ask for.

Flexbox Compatibility: IE11+ and all modern browsers. Watch out for Safari which requires the -webkit- prefix.

Example


With Bootstrap: Here is the fiddle from your comment with my changes added. The 1px gap on the left has been removed with div.flex.row:before, div.flex.row:after { display: none }

Relevant answer: Remove 1px gap when using display:flex in Chrome


I have stripped all unnecessary classes for this example. Currently, both column heights are determined by the tallest column. You could also have the columns fill in the entire height of the page with height: 100vh on the flex container — read more about viewport units here.

Viewport Units Compatibility: Viewport Units are almost well supported.

Update: To give a column a larger width, give it a larger flex value. I have changed the second column in this example to flex: 3 and it will be wider.

body {
  color: red;
  margin: 0;
}
.flex {
  display: flex;
  /*Should the columns span the entire height of
the page? Use:
  height: 100vh;*/
}
.column {
  flex: 1;
}
.column:first-child {
  display: flex;
}
.column:last-of-type {
  background: #000;
  flex: 3;
}
aside {
  flex: 1;
  background: #F90;
}
<div
class="flex">
  <!-- menu -->
  <div class="column">
    <aside>
      Menu goes here
    </aside>
  </div>
  <!-- content -->
  <div class="column">
    <p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Etiam ac elementum
justo. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Phasellus nec elementum erat.
Suspendisse consequat ut metus ut cursus.
      Aenean et lectus id libero venenatis varius.
Vivamus luctus ligula sit amet faucibus vulputate.
Vestibulum tincidunt fringilla mauris, a vulputate
magna egestas nec. Vivamus a odio ut nibh viverra
fermentum.</p>
    <p>Nulla facilisi. Pellentesque nec
libero leo. Duis porta ut neque vulputate blandit.
In vel quam eu eros finibus feugiat ut in nulla.
Morbi congue, tellus commodo euismod pulvinar,
lacus dui fringilla lectus, in tempus mi nulla
semper ex. Integer feugiat,
      lectus a facilisis rutrum, ex magna
tincidunt ligula, in suscipit turpis lorem quis
neque. Suspendisse dictum, nulla at aliquet
cursus, magna tellus mattis purus, nec volutpat
mauris nunc non neque. Mauris pretium mauris sed
eros interdum lobortis.
      Aenean id vestibulum nisl. Praesent sit amet
tempor nulla, consequat viverra ante. Maecenas eu
pretium lacus, a consectetur sem. Proin viverra
eget turpis eu condimentum. Donec et egestas enim.
Maecenas fermentum auctor ligula, nec fringilla
mi.
      Quisque hendrerit purus eget urna semper
sodales.</p>

  </div>
</div>


Categories : HTML

Related to : Equal height Flexbox columns in Chrome
CSS columns not working when divs have equal height
Those columns are stacking vertically, not horizontally. So it goes: item1 item4 item7 item2 item5 item3 item6 You can achieve the desired behaviour by simply removing the column-count property: http://jsfiddle.net/zephod/n42sqd4v/1/ Edit: If you want full masonry behaviour, my advice is to use the jQuery Masonry plugin. Not only will it have covered a lot of edge-cases you will have mis

Categories : HTML
Flexbox child not reading height/width of parent
The .body parent of .super-thing is display: flex so it's children don't inherit it's height or width if they don't have flex properties. The power of flex compels you! Set flex: 1 on .super-thing so it grows and shrinks with a 1% margin to create a gap. There is no need for a width or height. .super-thing { background-color: white; margin: 1%; box-shadow: 2px 1px 1px #000; flex: 1; }

Categories : CSS
Bootstrap: Equal height of nested col-md-* elements
Equal height columns is a famous problem in the CSS model, and Bootstrap can do very little to help you. The best you can do is read the broad amount of literature out there (I recommend starting with http://css-tricks.com/fluid-width-equal-height-columns/) and work out which of the various hacks and limitations are the correct fit for your purposes. This will differ based on the target browsers,

Categories : HTML
Equal Column Height on Hidden Elements
Before revealing/hiding the content reset the height that was added to the container .blocks to `auto'. Earlier the height was fixed(on initial calculation) so any content added would overlap. JS //on click of the button $('button').on('click', function () { $('.blocks').css("height", "auto"); $('.hidden-content').show(); setEqualHeight($('.blocks')); }); Fiddle

Categories : Jquery
Equal heights of columns in a row with jquery
I did a jsFiddle of this: http://jsfiddle.net/xpdg5ov2/5/ I was getting an error when doing $(window).load I had to change it to $(document).ready I also noticed that the parent height changed through each loop EDIT: in that one, the divs were indeed the same height, but the parent height changed after it changed the children. so I just made it vertically align to the top: http://jsfiddle.net/x

Categories : Javascript
Recently Add
How can I set a google-font as default-font in CKEditor?
Cross browser styling issue
Submitting/detecting a submit a form by clicking on a CSS button
Html Unknown border around h3?
vim syntastic:
proprietary attribute "novalidate"
Hover effect is not working,even style written for it correct?
Why margin-top different for chrome and safari?
Pass values and parameters from HTML to CGI
How to stop repeating a background image in html email without using CSS?
Why does GMail break inline (CSS) styles for an email with minified markup/HTML using quote-printable encoding?
Give a space in the orderedlist
How to expand the height of li inside vertically centered div?
making newsletter(HTML) with SpringFramework3
Why IE not showing my css box shadow effect
Layout image and paragraph horizontally
Do I Have To Specify A Height For BG Image Or Parent Container?
How to search hyper link tag based on key pressed
Align three images in footer side by side
Foundation Top Bar Dropdown z-index issue
CSS: Pseudo-elements
IE8 back button resetting form
How to position a div made "box" with HTML
htaccess rewrite not changing html form post url
Alignment of text field and text area from Bootstrap elements
Bootstrap table not filling parent
How to automatically get element height and use that height in overlay effect
Relative Link To Local File
1px gap issue with responsive HTML template in outlook - im going crazy
"Compressing" Header Codes?
Tag appears to be interpreted as part of a link and thus breaking the link
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.