iwato Posted June 25, 2019 Share Posted June 25, 2019 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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2019 Share Posted June 25, 2019 The property is "flex-wrap" with a dash between the words. 1 Link to comment Share on other sites More sharing options...
iwato Posted June 25, 2019 Author Share Posted June 25, 2019 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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2019 Share Posted June 25, 2019 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. 1 Link to comment Share on other sites More sharing options...
iwato Posted June 26, 2019 Author Share Posted June 26, 2019 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now