Struggling to grasp the concept of flexbox's behavior when it comes to achieving full height

We are currently working on a layout that requires a slider image to completely fill the height of its parent element.

After successfully creating a static example with an inline background image and utilizing flexbox to ensure the div fills the height of its parent, we encountered difficulties when attempting to implement this within a slider format. Despite trying various solutions, such as applying height:100%; to parent elements up the DOM hierarchy to body or html, the desired effect was not achieved. You can view our static image example here: http://jsfiddle.net/cmscss/WLggG/29/

/* HERO STYLES */

/* Ensure hero children expand to fit height of parent due to issues with height:100%; */
.hero {
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}
.hero-image,
.hero-text {
    width: 50%;
}


/* HERO IMAGE STYLES */

/* Make inline hero image stretch to fill background */
.hero-image {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Set slide img tag as transparent for utilization of background-size property */
.hero-image img {
  margin: 0;
  line-height: 0;

  /* For IE 8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* For IE 5-7 */
  filter: alpha(opacity=0);

  /* Modern browsers */
  opacity: 0;
}

We are now seeking guidance on how to create the necessary additional divs for a slider while preserving flexbox's full height behavior. View our attempt here: http://jsfiddle.net/cmscss/WLggG/27/

If anyone has insights on applying flexbox's layout behavior to grandchildren elements to replicate the success of our initial JSFiddle example, your input would be greatly valued.

Answer №1

Make sure to declare the children of flexbox as flexbox elements too. It is unnecessary to use floating along with flexbox and directly setting its width defeats the purpose of flexbox, which is to allow children to grow or shrink based on available space. No need for floating as flex-direction can determine horizontal or vertical stacking.

In my book titled "Functional CSS," still accessible for free on Amazon, I delve into the fundamentals of flexbox. Feel free to check it out if you're interested.

Check out the fiddle here: http://jsfiddle.net/fQkyf/3/

CSS code:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

p {
    line-height: 2em;
}

img {
    width: 100%;
    height: auto;
}

.hero {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hero-image,
    .hero-text {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hero-text {
    padding: .5em 2em 0;
}

.hero-image {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.hero-image > .hero-gallery {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    outline: 1px dotted red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* make slide background image stretch to fit */
.hero-slide {
    position: relative;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

.hero-slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://placehold.it/1200x1200");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* make slide img tag transparent so we can use background-size above */
.hero-slide img {
    margin: 0;
    line-height: 0;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* modern browsers */
    opacity: 0;
}


.hero-text {
    padding: .5em 2em 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for automatically adjusting canvas size within a parent container

I am facing a challenge with a canvas element inside a div: <div class="preview"><canvas id="cropped" width="2480" height="2003"></canvas></div> The div block is smaller than the canvas. How ...

Experience full-screen viewing by double-clicking without the distraction of video controls (WordPress/HTML5)

I've been tasked with creating a video thumbnail that, when clicked, will lead the user to a new page where a single autoplaying and looping mp4 video will be shown. The issue arises when I can't interact with the video because the controls are h ...

The nested ThemeProvider takes priority over the theme's style definitions

Is there a way to render a component and then apply additional rendering using useEffects in React? The issue I am facing is that when I have a component with a specific theme, each useEffect call ends up overriding the style of the original component wit ...

Deactivate hover effect on specific row in Bootstrap hover table

After searching for a solution, I came across this query. However, it did not provide the answer I was looking for. It suggested setting fixed backgrounds on specific rows, but this could potentially disrupt the style if, for example, a bg-gradient is set ...

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

Unexpected background image slideshow appearance

I am encountering an issue with my slideshow where the last image briefly appears before the first image loads in a continuous loop. The offset of the initial image causes it to start at the middle of the window, and in Google Chrome and Safari, subsequent ...

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

The .css() method does not apply any styles to the elements in the document

Having trouble with a jQuery function: .css() This is the HTML code in question: <div class="..." id="about"> // OTHER HTML CODE </div> And here's the corresponding jQuery code: (function($, window, document) { $(function() { ...

Inconsistency with div heights in Chrome, unlike Firefox and IE where it works smoothly

I am in the process of creating a simple website using MVC3, with plans to make it easily expandable in the future. Despite my limited skills in javascript, I have attempted various online solutions to address a persistent issue with Chrome. Some have sugg ...

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and lef ...

Expanding and reducing the size of the CSS "background-image" using jQuery

I have a little icon that I want to expand when hovered over and then return to its original size when the mouse moves away. I was able to achieve this using the following CSS code: $(".jq_icon").hover(function() { $(this).stop().animate({width:56, height ...

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...

Eliminating excess space beneath nested images while adjusting the size without distorting the image

Struggling with getting an image to scale properly inside a nested div in a fluid layout. Looking for advice on how to prevent the image from becoming smaller than its parent div. EDIT: Here is an updated CodePen link demonstrating that using min-height s ...

JQuery's find() method followed by length/size() is resulting in a return

I'm running into an issue with dynamically created divs. Here's how they are created: // Loop through and append divs to #result_main_search $("#result_main_search").append('<div class="singleresult_main_search"> <a href="http:// ...

What is the process of importing a stylesheet from an external source in a React application?

When it comes to using icons from fontawesome or fonts from google fonts, I typically include something like this in the head section of my HTML code: <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> But how would one g ...

Conceal / Modify / Incorporate a picture

My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called. I am facing two issues with ...

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

Showcasing a set of divs - arranged in rows of three

Utilizing bootstrap 3 to exhibit user contact details on a website has proven to be challenging. My initial idea was to use the col-md-4 bootstrap CSS class to showcase three contact details per line, but it seems my expectation did not match reality. Th ...

Connecting to a nearby version of Bootstrap causes CSS to malfunction

Currently, I am facing an issue while developing an angular+bootstrap application for my work. At the initial stages of development, I encountered a problem where all the CSS breaks whenever I link to a local copy of Bootstrap, whether minified or not. My ...