Vertical height not same in flex two columns

Target source: Here
This should help.

I have temporarily unlisted this topic until the actual question can be clarified. It is much too vague so far.
Also it is looking like it may be more of a css question, not php.
On another point, is there any chance you could increase the contrast between the background and the white elements, I foresee many people srtuggling to see them properly.

Contrast increased + filed in correct category i.e. HTML-CSS. Can you please list it now.

The question is still not clear, but reading between the lines, is the problem that the second flex child in both containers has a margin, where the first doesn not?

1 Like

The height of the 2nd column not coming same.

I think I got the error after analyzing should we delete this question?

No just tell us the solution you found so others can benefit:)


Actually I set the margin on one inner div - That margin was creating issues.

1 Like

I have couple of more issues in the same link. so I am posting in this same thread.

Issue #1 →
From where is this extra padding coming?

Browsable link

I have created borders in red color for the other users to understand the issue.


<p class="entry-meta">
  <span class="entry-span"><span class="label">Written by</span>Monica Belluci</span>
  <span class="entry-span"><span class="label">Updated on</span>Monica Belluci</span>
  <span class="entry-span"><span class="label">Discussed by</span>4 comments</span>

I want the first entry-span on the leftmost - second in exact between - Third and last in the rightmost.

I am using this CSS, but could not accomplish this.

.entry-meta {display: flex; justify-content: space-around; border: 2px solid red;}
.entry-span {flex: 0 0 30%;}
.entry-span span { display: block;}

It’s the “space-around” value in the entry-meta rule you posted. :wink:

I tried space-between also but the last item doesnt goes to the right extreme.

It will if you also remove the flex rule in the entry-span block. Then the space-between will work in full.

1 Like

Can you educate me why there was such kind of behaviour?

Teaching is not my strong suite. :slight_smile:

The “entry-span” flex property was set 30% of its parent overriding the item sizing from the parent. Then the text-align on the spans made up the right gap as the content didn’t fill the width.

Hope I made it clearer. :slight_smile:

1 Like

Yes it does:) Give the element a green background and you will see it goes far to the right.

.entry-span {
	flex: 0 0 30%;

The reason the text is not at the right then becomes obvious because the element itself is 30% wide. As Erik said if you don’t want 3 blocks of 30% then don’t set their basis to 30% and then they become content width only.

It’s a good idea when using flex to give a coloured background to each flex item so you can actually see what the element is doing.:slight_smile:


That can be helpful, and adding temporary borders will often not cause any problems. But I have found that sometimes the extra pixels do affect the layout. IMHO, when debugging layout issues, it would be better to style a property that can not affect any dimensions eg. background color, outline instead of border, etc.


The border shouldn’t be a problem @Mittineague as long as box-sizing is set:

html {
  box-sizing: border-box;
*, *:before, *:after {
  box-sizing: inherit;



I usually favor dashed outlines pulled inside the edge of the box so adjacent outlines doesn’t overlap.

Transparent backgrounds is also very useful, they very clearly show overlapping areas.


    outline: 1px dashed green;
    outline-offset: -1px;
    background: #f0f3;