Balancing heights using Flexbox

Seeking assistance with utilizing flexbox.

Trying to equalize the height of the column containing item 2 and 3 with that of Column 1.

Preferably, both item 2 and 3 should expand to occupy the available space. Have tried various solutions without success.

Below is the HTML code:

<div class="container">
  <div class="row yellow">
    <div class="col-sm-6 pink">
      <h1>Item 1</h1>
      ...
    </div>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-12 cyan">
          <h1>Item 2</h1>
          ...
        </div>
        <div class="col-sm-12 green">
          <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>

Utilizing Bootstrap 3 and flexbox Grid for its flexbox features.

CodePen Link

Flexbox Grid

htmlcsstwitter-bootstraptwitter-bootstrap-3flexbox

Answer №1

Utilizing the power of plain flexbox without reliance on the framework flexboxgrid

body,
html {
  height: 100%
}
.yellow {
  background: yellow
}
.pink {
  background: pink
}
.cyan {
  background: cyan
}
.green {
  background: green
}
.container {
  display: flex;
  flex-flow: column wrap;
  height: 100%
}
.row,
.col-xs-6 {
  height: 100%
}
.col-xs-12 {
  height: 50%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
  <div class="row yellow">
    <div class="col-xs-6 pink">
      <h1>Item 1</h1>
      ...
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 cyan">
          <h1>Item 2</h1>
          ...
        </div>
        <div class="col-xs-12 green">
          <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

It should not pose a major challenge, even without the use of flexbox grid and no requirement to alter the HTML structure.

.row {
  display: flex;
}

.col-sm-6 .row {
  flex-direction: column;
  height: 100%;
  .col-sm-12 {flex: 1;}
}

Check it out on CodePen here

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

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

htmlcssmargin

The image fails to display when the Image tag in next.js is used

I have a picture in the public/img folder. I am trying to display it using the built-in <Image/> tag in next.js. This is the code I've written: <Image onClick={hideModal} alt="close_button" ...

javascripthtmlreactjsimagenext.js

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm just starting to delve into React and I am eager to transform my regular JavaScript code into a React format. However, I am not quite sure how to

In my React JavaScript, I am trying to insert some regular JavaScript code. I attempted to use the {} brackets, but it did not work as expected. import './App.css'; function App() { return ( <> <div className=" ...

javascripthtmlnode.jsreactjs

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...

javascripthtmlcssvalidationbrowser

Discover the process for animating the change of grid item size using Material UI

I am currently working on a project that involves React and Material UI. One challenge I am facing is figuring out how to animate a grid item size change. The default size of the item is set to sm={3}, but when a user hovers over it, I want it to expand t ...

javascriptcssreactjsmaterial-uinext.js

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

htmlcsssass

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

javascriptjquerycssmouseeventparallax

Hiding scrollbars in a component: The ultimate guide

I am seeking a way to completely hide scrollbars from an HTML component using CSS styles within a VueJS component. I have tried the solution of using overflow-y: hidden; within the component as well as within a specific subclass in the CSS, but neither com ...

htmlcssvue.jsvue-component

Switching Angular-cli from scss to css

I accidentally created my Angular project using scss style, but I want to switch to css style. Is there a way to convert scss style to css using Angular-cli? ...

cssangularsass

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...

javascripthtmlangular

Styling a rectangle in p5.js: Tips and tricks

In my p5.js code, I created a rectangle using rect(): rect(10, 10, 10, 10); Now, I want to add some style to it with a box-shadow effect: box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff; However, when I tried to apply the style using the doc ...

javascriptcssp5.js

Engaging with an HTML/JSON web service

I am looking for guidance on how to utilize a testing service for sending XML signed invoices that need to cross control through the Treasury Ministry. Can someone provide assistance? == TESTING ENVIRONMENT == API RECEPTION URL = https://api.comproba ...

htmljsonoauth-2.0

The input box fails to show larger values on the user's page

Show me the biggest number that the user enters in an input box and then display it back to them. I need some improvements to my code, ideally making it possible with just one input box instead of two. <!DOCTYPE html> <html la ...

javascripthtmlcssif-statement

Make sure that the login page is the first to appear

My login page is functioning perfectly as expected. Instead of using a database of users, I have hardcoded the username and password within the code. However, the issue I am facing is that the login page is not displayed before the index.php page. Users c ...

phphtml

What steps should I take to align the name and email fields next to the text on the left and the button on the right?

Having placed an AWeber sign-up form at the top of the header on the page , I've successfully positioned the form horizontally using CSS. However, it appears misaligned. How can I correct this issue? All standard AWeber forms are in a vertical format ...

cssforms

Object shifting as the window is resized

Check out the Umbrella image in the images section: Full-size window: . Reduced (ideal placement): I want my umbrella image to always display in the center of the screen, regardless of the size of the window. It should work when the window shrinks and ...

htmlcss

Upgrade your Angular template to templateUrl by utilizing Components

Currently utilizing Angular 1.5.7 with component structuring, I am seeking a way to display loading html while the component is loading from the server. The following code does not meet my desired outcome. I wish for the loading html code below to be visi ...

javascriptjqueryhtmlangularjs

Tips for building a material design input form with CSS and Bootstrap

I am working on creating a material design input form using CSS and Bootstrap. The current code I have is not providing the exact result I desire. If you want to view the source code, check out this Code Pen Link Here is the HTML CODE that I am using: & ...

javascripthtmlcssbootstrap-4material-design