Suppressed Flexwrap Attribute

[iwato]

BACKGROUND:  I am inserting a div tag into an HTML document via Javascript and for some reason an ultra-specified flexwrap attribute is being suppressed.  Other flexbox attributes contained within the same specification appear.  It is baffling.

 

CODE:

section#middle #main #gctutor_div #heading #needhelp_flexbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flexwrap: wrap;
}

.needhelp_left {
	width: 48%;
	text-align: right;
}

.needhelp_right {
	width: 48%;
}

THE EXPERIENCE:  You may experience this phenomenon by proceeding to tutor.grammarcaptive.com,  clicking where it says, "Learn to navigate ...", and then narrowing the width of your screen.

QUESTION:  How does one account for the suppression? And, if possible, correct for it.

Roddy

[Ingolme]

The property is "flex-wrap" with a dash between the words.

[iwato]

Thank you, Ingolme.  That was helpful, but it did not solve the problem.  The attribute/property is no longer suppressed, but the resulting condition is identical.  When the screen is narrowed no wrapping takes place.  Rather the image moves in front of the text, as the two <div>s appear to converge.

I had hoped that the when the viewport shrunk the items within the flexbox would realign vertically.  It were as if, the affected div does not understand that the viewport is shrinking. 

Roddy

[Ingolme]

You specifically set them to 48% of the window, so they always fit on one row. If you want them to wrap, you have to give them a width which will eventually not fit in the window and then they will move into columns.

Alternatively, you can remove the width property and just use a media query to change the flex-direction to column on mobile devices.

[iwato]

Thank you, Ingolme.

Your observation appears to have been correct.  I changed the code as follows and all is working as it should.

section#middle #main #gctutor_div #heading #needhelp_flexbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
}

.needhelp_left {
	text-align: right;
	margin: auto;
}

.needhelp_right {
	margin: auto;
	margin-top: 1.5em;
}

Roddy