CODEWITHSUNDEEP
htmlcss
goodnight sir
goodnight sir

Reputation: 33

How to match height of div inside a flexbox div with another CSS

enter image description here

I Have this divs in my file. this is my structure.

<div class=div-wrap>
   <div class="div-item">
   <div class="img">
      <img src="#">
   </div>
   <div class="txt">
      <p>text here but longer</p>
   </div>
   </div>

   <div class="div-item">
   <div class="img">
      <img src="#">
   </div>
   <div class="txt">
      <p>text here</p>
   </div>
   </div>
</div>

.div-wrap{
    display:flex;
    justify-content: space-between;
}

.div-item{
    flex-basis: 45%;
}

.txt{
    margin-top: -60px;
    padding: 10px;
}

this is my draft code. when i do this, all is doing fine, but when the text inside p is getting longer, the height of .txt is now different as seen in the illustration. is there any way to make them the same height taking the height of the taller one? Thanks in advance.

I forgot to mention the width of the .txt is 80%. I don't want to set a static height since the text can be changed in the future. the summary of my question is, how to make the height of the div inside a flexbox div the same height without using a static height taking the height of the tallest div.

Upvotes: 1

Views: 63

Answers (1)

Bman70
Bman70

Reputation: 773

When I ran your code it didn't give me the result pictured in your graphic. However, if you have something with that layout, you could equalize the two div sizes with JavaScript.

The JavaScript shown below checks which .txt div is taller, then resizes the other one to match it. In order for this to work, you have to give each div an ID. (They can have both an ID and a class, so you can leave the .txt class if you need it.)

The CSS below is just an example, I didn't use yours since it wasn't giving me the box layout for some reason. Also it might be cleaner to do this with an HTML table, or CSS grid which Behrouz mentioned.

var leftHeight = document.getElementById('textleft').offsetHeight;
var rightHeight =  document.getElementById('textright').offsetHeight;

if (leftHeight > rightHeight) {
document.getElementById('textright').style.height = leftHeight+'px';
} 
else if (rightHeight > leftHeight) {
document.getElementById('textleft').style.height = rightHeight+'px';
}
.div-wrap{
  margin: 0 auto;
  text-align: center;
  padding: 2em;
  height: 110vh;
}

.div-item{
  border: 2px solid blue;
  display: inline-block;
  width: 40vw;
  text-align: center;
  height: 150px; /* only for Stack Overflow */
  margin: 0 0.2em;
}

.txt{
  background-color: white;
  padding: 0 1rem;
  display: flex;
  border: 1px solid red;
  width: 65%;
  margin: 10% auto;
  text-align: left;
  line-height: 1.2rem;
  box-sizing: border-box; /* So the border doesn't affect height */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class=div-wrap>
   <div class="div-item">
   <div class="img">
    <img src="#" />  
   </div>
   <div class="txt" id="textleft">
<p>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
</p>
   </div>
   </div>

   <div class="div-item">
   <div class="img">
    <img src="#" />
   </div>
   <div class="txt" id="textright">
<p>Organically grow the innovation via strategies.
</p>
   </div>
  </div>
</div>

Upvotes: 1

Related Questions