Skip to content
Fix Code Error

How can I make Flexbox children 100% height of their parent?

March 13, 2021 by Code Error
Posted By: Anonymous

I’m trying to fill the vertical space of a flex item inside a Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

And here’s the JSFiddle

flex-2-child doesn’t fill the required height except in the two cases where:

  1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
  2. flex-2-child has a position absolute which is also inconvenient

This doesn’t work in Chrome or Firefox currently.

Solution

Use align-items: stretch

Similar to David Storey’s answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component even (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Answered By: Anonymous

Related Articles

  • Combining items using XSLT Transform
  • Centering in CSS Grid
  • In CSS Flexbox, why are there no "justify-items" and…
  • How to show title in hover - css / jquery
  • Navbar not filling width of page when reduced to mobile view
  • Fix top buttons on scroll of list below
  • Vertical Align Center in Bootstrap 4
  • Active tab issue on page load HTML
  • Best way to extract messy HTML tables using BeautifulSoup
  • Having trouble with my nav bar/header, It used to…
  • Is it possible to apply CSS to half of a character?
  • How to specify line breaks in a multi-line flexbox layout?
  • Chrome / Safari not filling 100% height of flex parent
  • After a little scroll, the sticky navbar just is not…
  • center 3 items on 2 lines
  • Why my "title" bloc doesn't go to bottom?
  • Keeping the User logged in
  • How do I do a drag and drop using jQuery to move…
  • Make div (height) occupy parent remaining height
  • How to set HTML5 required attribute in Javascript?
  • How to vertically center a container in Bootstrap?
  • Bootstrap - center child when parent isn't centered…
  • How to use html template with vue.js
  • How to use hex color values
  • How do i update a javascript variable as its value changes?
  • Twitter Bootstrap tabs not working: when I click on…
  • Is there any function in Vue to check if the DOM…
  • Changing Icon Color behind ListTile in an…
  • Is it possible to move my text side by side with my icon
  • Web colors in an Android color xml resource file
  • Increasing size of semi circle using css
  • How to center an element horizontally and vertically
  • Animating Elements in One by One
  • Adobe XD to responsive html
  • Columns side by side with css grid
  • Make Iframe to fit 100% of container's remaining height
  • How do I remove single children in a tree?
  • Vertically align an image inside a div with…
  • HTML table with 100% width, with vertical scroll…
  • CSS selector for first element with class
  • How can I adjust the color of a fixed element to its…
  • How to vertically align an image inside a div
  • Trying to keep dropdown menus flush to the edge of…
  • What are the nuances of scope prototypal /…
  • Jquery fadeToggle Trouble
  • How to prevent scrolling the whole page?
  • Change background color on mouseover and remove it…
  • AppCompat v7 r21 returning error in values.xml?
  • How do I keep only the first map and when the game…
  • When tab is selected, show next tab.. if last tab…
  • How to pull out an element to the right in…
  • How can I center all my contents in html?
  • Checkbox Validation Without Arrow Functions using Svelte
  • Display Grid does not work in Polymer correctly
  • querySelectorAll not working for multiple styling
  • CSS grid wrapping
  • Separate function with same class name by querySelectorAll
  • Javascript validate all checkboxes are selected
  • Vuetify grid system row management
  • How to vertically align into the center of the…
  • Plotting multiple lines, in different colors, with…
  • How can I combine flexbox and vertical scroll in a…
  • CSS Transition is not working for the first time
  • When I use '/js/app.js' on my Laravel view my…
  • How to horizontally align ul to center of div?
  • How to specify height of nested web component custom…
  • Why doesn't the height of a container element…
  • How can I add class active if the element click on…
  • Bootstrap 3 - 100% height of custom div inside column
  • if statement is executed while condition is false
  • Pass props to parent component in React.js
  • can't get the click position of a div element
  • Re-arrange position in a table maitaining order
  • Javascript and css animation
  • Vertically centering a div inside another div
  • Onclick event not happening when slick slider is…
  • Create HTML table using Javascript
  • how to move button on bottom using css?
  • Cannot bind to custom element's attribute placed…
  • `white-space: nowrap` inside flex container only…
  • unexpected null value Flutter
  • Octave using 'for' statement to show two animations…
  • CSS Flex Box Layout: full-width row and columns
  • How to align flexbox columns left and right?
  • Can I modify Vue.js VNodes?
  • Managing longs and short orders like LucF PineCoders…
  • Flutter web tabbar scroll issue with non primary…
  • How do I center content in a div using CSS?
  • VueJS transitions using v-view
  • How to blur the background after click on the button…
  • A simple explanation of Naive Bayes Classification
  • Component to take all available height with Flexbox…
  • Trouble with boxes appearing/hiding based on selection
  • CSS flexbox not working in IE10
  • Convert array to nested JSON object - Angular Material tree
  • Vue.js custom select component with v-model
  • Uncaught ReferenceError: $ is not defined
  • Sort table rows In Bootstrap
  • "Non-resolvable parent POM: Could not transfer…
  • My DIV elements go diagonal instead of horizontal

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to duplicate a whole line in Vim?

Next Post:

How to convert a Map to List in Java?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error