content is overflowing the div in ie11

Question

the descriptive sentence under each one of the project containers is over flowing the div container only in IE11 but in all other tested browsers (chrome, edge, and firefox) text wraps as expected.

So this is one paragraph tag right above the issues that is formatting just fine IE11

here is an example of the issue see how the sentence is over flowing IE11

here is the exact same thing in Chrome, which is the same in firefox and edge.

lots of googling with no luck maybe I just am searching for the wrong things.

<div class="projects">
          <div class="project">
            <img src="img/outerspace.JPG" alt="The stars above." class="img" height="250px">
            <ul>
              <li><label class="projectBtn" id="projectOne"><a href="github.com"> Preview! </a></label></li>
              <li><label class="projectBtn"><a href="https://www.github.com/" target="_blank">See the code!</a></label></li>
            </ul>
            <h3 class="technologies">Technologies</h3>
            <ul  class="tech-list">
              <li>Html 5</li>
              <li>CSS3</li>
              <li>Vanillla JS</li>
            </ul>
            <p>
           This is a basic Space site using a JSON API call to showcase the 
           image of the day from nasa.
            </p>
          </div>
          <div class="project">
            <img src="img/angelosgallery.JPG" alt="Angelos Gallery" class="img"  height="250px">
            <ul>
              <li><label class="projectBtn"><a href="https://brandon-b91.github.io/angelos-gallery/" target="_blank">Preview!</a></label></li>
              <li><label class="projectBtn">See the code!</label></li>
            </ul>
            <h3 class="technologies">Technologies</h3>
            <ul  class="tech-list">
              <li>Html 5</li>
              <li>CSS3</li>
              <li>Vanillla JS</li>
            </ul>
            <p>
              This is an artists dream a scrolling showcase image carousel 
              using Vanilla JS
              a section to see a list out of current projects and a section 
             for upcoming projects.
            </p>
          </div>

.projects {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}


.projets ul, li {
  display: inline-block;
}

.project {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

It is not recommended to write
inside
.But even though it's a hack, you can use with required bootstrap classes to make it look like
. — Shaik Bajivali, Jun 22 '19 at 05:26
Please provide a reference for *"It is not recommended to write a
inside a
.."* @ShaikBajivali — Michael Benjamin, Jun 22 '19 at 12:26
Wait why can't we use a
tag inside a
as far as i knew a div holds all content and a
is just specifying a paragraph. — Brandon.b, Jun 23 '19 at 02:09
You can check this link has many work around mentioned in it may help you to solve the issue. Ref: https://github.com/philipwalton/flexbugs/issues/170 — Deepak-MSFT, Jun 24 '19 at 02:10

Jason · Answer 1 · 2019-06-22T04:57:35.993

1

I believe it's an issue with nested flexboes in IE10 and IE11. Try adding

flex: 1 1 0%

To your 'projects' class css styling and see if that fixes it!

edited Jun 22 '19 at 04:57

answered Jun 22 '19 at 04:35

Jason

284
2
10

so this didn't work after all, so IE has an issue with nesting flexbox's it has an issue with grid is there a way I can tangibly throw IE on the floor and jump up and down on it? – Brandon.b Jun 23 '19 at 01:53

content is overflowing the div in ie11

1 Answers1