Jump to content
iwato

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Thanks 1

Share this post


Link to post
Share on other sites

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.

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×