Having issues with achieving equal height for divs using flex and height properties?

I created a block named textCard in WPBakery. The markup for this block is enclosed within default Bakery classes, rendering the markup like so:

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Not sure why the above CSS functions when the wrappers are removed:

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.vc_column-inner and .wpb_wrapper do not have any styles assigned to them, so I'm uncertain about what may be causing this outcome?

htmlcssbootstrap-4

Answer №1

By placing your textCard inside a wrapper and setting it to 100% height, it will expand to take the full height of its parent wrapper. In this case, the parent wrapper had a default property of height: auto;, causing it to collapse.

When the height is set to auto, the element adjusts its height automatically to accommodate its content for proper display. - W3Schools

The reason removing the two wrappers worked is because the col-sm-4 was already at full height due to its parent having the property align-items: stretch; by default with display: flex;.

To resolve this issue, simply add a rule to make the wrappers also 100% height of their parents along with the textCard.

Check out CodePen

.textCard {
  border: 1px solid red;
  display: flex;
}

.vc_column-inner,
.wpb_wrapper,
.textCard {
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

The reason for this is that the styling is no longer affected by the actual height, as it is nested within two <div> elements. The following style should be a child of class="col-sm-4"

To make the change, use the code below:

.vc_column-inner {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

Alternatively, you can move the <div class="textCard"> under <div class="col-sm-4">

Answer №3

It seems that you can achieve the desired layout without using the bootstrap .col-4 class if you opt for display:flex.

By setting the height of the items to 100% and using display:flex, they will automatically adjust to fit the full height.

Another option is to set the parent container .container to display:flex and give the child elements .textCard a value of flex:1 so that they all share equal space. The children will also align themselves to stretch by default within their flex container.

You can view an example on CodePen here, I hope this clarifies things for you! https://codepen.io/Robhern135/pen/LKaGVL

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

Troubleshooting Problems with CSS Margins

I am facing an issue with my CSS code where using margin: 0 instead of margin-top: 0 for header p seems to make the header { margin: 0 0 20px; } rule ineffective. Is this how it is supposed to work? Upon inspecting in Firebug, it appears that the margin-bo ...

css

Maintaining Element Position in Responsive Design when Window is Resized Using Absolute Positioning Inside Relative

I have 2 div elements. The first div is larger and has the position:relative property. The second div contains a set of boxes inside the first div and has the position:absolute property. As I resize the window to make it responsive, the height of the se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Utilize the tab functionality within AngularJS

By default, HTML disables two tabs "<tab heading='Test Case Details' active='tabs[1].active' disable='true'>"+ "<tab heading='Test Case Past Results' active='tabs[2].active' disable='true&apo ...

htmlangularjstabs

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

javascripthtmlcss

The initial navigation pill content failed to display in Bootstrap

I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...

jquerycsstwitter-bootstrap

Smooth scrolling feature interrupts the functionality of anchor links to navigate to a different page

I'm currently designing my portfolio website but I'm having trouble getting the anchor links to function properly. When a user clicks on a case to view details, I want them to be able to easily navigate back to the main portfolio section of my s ...

javascriptjqueryhtmlanchorsmooth-scrolling

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

htmlcssscrollscrollbar

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

javascriptjqueryhtmltwitter

Encountered an error in React where the declaration file for a module could not be located

New to Typescript and trying to incorporate a splitter into my project. I'm utilizing SplitPane from "react-split-pane/lib/SplitPane" and Pane from "react-split-pane/lib/Pane" in my Typescript project, but encountering an error: Could not find a de ...

javascriptcssreactjstypescriptmaterial-ui

Using Ajax and jQuery to dynamically insert an option into a datalist

I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...

javascripthtmljqueryjsonajax

Tips for centering text vertically in an input box specifically for Internet Explorer (IE)

Here is the code I am working with: <input type="text" class="contactInput" value="my string"> .contactInput { border:0; margin:0; padding:0; background-color:#000000; color:#ffffff; height:22px; width:290px; padding ...

htmlcssinternet-explorer

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

Update the image source when hovering over the parent element

Check out this snippet of HTML code: <div class="custom text-center threeBox ofsted"> <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/"> <img class="text-center ofstedLogo" src="images/ofsted_good_transparen ...

javascriptjqueryhtmlcss

The issue is with the function t.split in Jquery mobile, it seems to

Currently, I am in the process of developing a website that pulls content dynamically from a database and inserts it into the HTML code. The site is designed with JQuery Mobile pages to allow for smooth transitions when clicking on links. Despite using JQ ...

phpjqueryhtmljquery-mobile

What is the best way to implement a dynamic form within a fieldset using jQuery Mobile?

I am trying to dynamically insert a form inside a fieldset. This is my approach using jQuery: $(document).on("pagebeforeshow", "#mainPage", function () { if (sessionStorage.login_state != 1) { alert('You don&bsol ...

jqueryhtmlcssjquery-mobile

Refreshing information within a table using Ajax Prototype

For my current project, I am utilizing PrototypeJS. I have implemented Ajax.PeriodicalUpdater to insert real-time data as required. However, I am facing an issue where the data is not getting replaced inside a specific table. Below is the HTML code snippet ...

javascripthtmlajaxprototypejs

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

javascriptjqueryhtmlcssangularjs

I'm trying to use Javascript to dynamically remove rows, but my code seems to be causing some issues

When a user enters text into a form, it is stored in a variable called 'userInput'. I have an HTML table with the ID "myTable". My goal is to use JavaScript to iterate through the table and remove all rows where the value of the 3rd column does n ...

javascripthtmlhtml-table