Vertical height not same in flex two columns


#1

Target source: Here
This should help.


#2

#3

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.


#4

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


#5

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?


#6

#7

The height of the 2nd column not coming same.


#8

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


#9

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


#10

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


#11

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.

Secondly,

<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>
</p>

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;}

#12

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


#13

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


#14

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


#15

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


#16

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:


#17

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%;
	background:green
}

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:


#18

<off-topic>
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.
</off-topic>


#19

<off-topic>
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;
}

</off-topic>


#20

<off-topic>
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.

Like:

.box{
    outline: 1px dashed green;
    outline-offset: -1px;
}
.box{
    background: #f0f3;
}

</off-topic>