Question for iPhone and Non-iPhone Users Related to Filling the Entire Width of a Flexbox

[iwato]

BACKGROUND:  I have a flexbox (#contact_div) that creates a column of rows (.content_item). Each row represents another flexbox that is divided into two columns (.contact_info and .contact_data).   Now, each row of columns is neatly spaced across the entire width of the parent #contact_div when in full-screen browser mode. As the width of the viewport is made smaller, however, spacing problems begin to arise.  in smaller viewports the width of each row is no larger than that of the widest content contained in each of the two columns.  I would like the columns  to fill the entire width of the original box (contact_div).

I have experimented with the flex statement, but to know avail.

#contact_div {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.contact_item {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.contact_info {
	padding: 0 1em; 
	font-variant: small-caps; 
	font-weight: bold;
	text-align:right;
	color: #4E7F4E;
}

.contact_data {
	padding: 0 1em;
}

You can find a visual display of the problem by clicking on the option Info in the Contact menu in the navigation bar of the Grammar Captive mainpage.  After the panel has been inserted narrow your viewport and observe how the problem appears and then disappears as you narrow your viewport ever further.  This problem does not appear to be smartphone related. CSS strikes again!

QUESTION:  Any ideas?

Roddy

[dsonesuk]

That is what using float on middle section will do, it will shrink to total width of the contact content, and the flex can only work to available width of its parent container element the middle section element.

[iwato]

So, if I change the value of the float property for the #middle section to none for smaller viewports, the problem will go away.  Is this what you are suggesting?

Roddy

[dsonesuk]

Yes! you have it twice in media queries 1 floats left the other right, these need to cancelled when it becomes single column.

[dsonesuk]

I've just notice, when I gradually reduce the width of my browser before it reached a media queries breakpoint, scroll bars appear? that is not supposed to happen. It should smoothly move from one to the other with no scrollbars appearing, that usually means  you have fixed width content, or containers which will remain greater than the next Media Query break point. It should on whatever width adjust accordingly to a responsive layout before that break point is reached, then it does not matter what specific device width it is.

 

[iwato]

Dsonesuk:  You are the Wizard of CSS.  By setting float to none my Contact/Info page now fills the entire width of the #middle section.  Thank you!

Roddy

[iwato]

I will need some more time for your last observation, as I cannot replicate what you have described.  All of my browsers are very old, and my operating system is obsolete.  Also, I am very tired.  it has been a long day.  Something to investigate again tomorrow!

In any case, thank you!

Roddy