Make height of the children same inside flex-box

Question

I have a div with display: flex and two children div say .left and .right. The content size of the .left and .right are different. I want to set same height for the children

here is a minimal working code

.container{
 display: flex;
 align-items: center
}
.left, .right{
 width: 50%;
}
.right{
 background: blue;
 height: 100%;
}
.left{
 background: green;
 height: 100%;
}

<div class="container">
 <div class="left">
  <span>this dis also should have same width as right div</span>
 </div>
 <div class="right">
  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
</div>

Here is the Fiddle for the question

Note: Prefer a solution without applying position: absolute as it will destroy my actual website

http://stackoverflow.com/a/33815389/3597276 – Michael Benjamin Sep 06 '16 at 14:34 — Michael Benjamin, Sep 06 '16 at 14:34

score 2 · Accepted Answer · answered Sep 06 '16 at 08:10

2

remove the height:100%; it will fix the issue .. flexbox apply its height in children itself.

answered Sep 06 '16 at 08:10

rmarif

548
4
12

remove align-item: center also. here is the fiddle .. https://jsfiddle.net/mL5scvsg/1/ – rmarif Sep 06 '16 at 08:13
and if you want to left side text center .. then you need to make it also display:flex and apply align- item on it .. here is the fiddle for this .. https://jsfiddle.net/mL5scvsg/2/ – rmarif Sep 06 '16 at 08:16

Make height of the children same inside flex-box

1 Answers1