How to address text overlapping issue in IE11 with Flexbox

When viewed in Internet Explorer, you may notice that the content of the gray box is overflowing into the yellow box, a behavior not observed in other browsers.

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;

  display: flex;
  flex-flow: column;
}
.childA {
  display: block;
  background-color: grey;
  width: 100%;
  height: auto;
}
.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  height: 100%;
  overflow: auto;
}
<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    // More content here
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

I am looking to achieve the following goals:

  • Allow the gray box (childA) to expand based on its content

  • Let the yellow box (childB) occupy the remaining height within its parent

  • Properly manage overflow if the content of the yellow box (childB) exceeds its dimensions

If anyone can offer assistance, it would be greatly appreciated.

https://jsfiddle.net/6yuh90cd/3/

cssflexboxinternet-explorer-11

Answer №1

It appears that there is a misunderstanding in the way Flexbox functions.

Setting the height of childB to 100% may not be the correct approach to indicate occupy the remaining height (even though certain browsers attempt to make it work).

The recommended method is to utilize the flex item properties; in this scenario, I have used the shorthand flex to instruct a flex item to utilize the available space.

Updated following the edit to the question

This solution addresses all three of your specified requirements:

  • allow the gray box (childA) to expand based on its content
  • enable the yellow box (childB) to occupy the remaining height within its parent
  • correctly handle overflow if the content within the yellow box (childB) exceeds the available space

Stack snippet

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;
  
  display: flex;
  flex-flow: column;
}

.childA {
  display: block;
  background-color: grey;
  width: 100%;
}

.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  /*height: 100%;                        removed  */
  flex: 1;                           /*  added, take the available space  */
  overflow: auto;
}
<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

Answer №2

To fix the overlapping item, simply include flex-shrink: 0 in your code.

This solution is compatible with all major browsers.

(Unnecessary code has been removed for clarity.)

.parent {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}

.childA {
  flex-shrink: 0; /* Add this line */
  background-color: lightgrey;
}

.childB {
  overflow: auto;
  background-color: yellow;
}
<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

Check out the demo on jsFiddle

Learn more about flex-shrink: 0: How to prevent Flex items from overlapping in Chrome and IE11

Answer №3

This code snippet appears to be functioning properly on Internet Explorer 11. You can view it in action at this link.

In the CSS, I set the childA class to have a minimum height of 50%.

.childA {
  display: block;
  background-color: grey;
  width: 100%;
  min-height:50%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In my HTML document, I have three identical Id's and I need to figure out how to target the third one using CSS. Can you help

I am working on an HTML document that contains multiple instances of ids and classes. Here is a snippet of the code: <!DOCTYPE html> <html> <body> <div id="Caption_G" class="editor-group"> editor-group<br /> ...

htmlcss

jQuery Function malfunctioning after initial click

I have developed a function that plays and pauses music. It is designed to be simple and lightweight for small audio samples, with basic play and stop functionalities. The issue I'm encountering is that after playing the music for the second time, the ...

jqueryhtmlcss

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Appreciate your time. I'm working on adding background color to the TEXT exclusively, and have successfully done so by styling .post-title { text-transform:capitalize; margin-top:4px; margin-bottom:1px; font-size:22px; background-color:#FFF; dis ...

htmlcssbackground

Trouble displaying portrait images in CSS slideshow

My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...

jqueryhtmlcss

Changing the link dynamically according to the presence of a specific cookie

Is it possible to dynamically change the link of a navigation button based on the entered URL? For example: If the original link for a button is 123.com on the website xyz.com, I would like the link to automatically adjust based on the specific URL enter ...

phphtmlcss

How can I achieve a "tab selector" effect with "input" elements on a website?

I am attempting to add "tab-highlights" similar to the ones shown above the form in the screenshot to my "input" elements. This will help users know which field they are currently focused on or have clicked. I have tried using "focus" and "::selection" to ...

javascripthtmlcss

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...

htmlcsstwitter-bootstrapnavbar

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

javascriptphphtmlcsswordpress

Struggling to align the search box in the center of the Bootstrap navbar

I'm currently working with a static bootstrap navbar and trying to center a search box within it. Unfortunately, all my attempts have been unsuccessful so far. The search box either appears below the navbar or doesn't display at all. At this poin ...

htmlcsstwitter-bootstrap

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

jquery code to show/hide all elements

My webpage contains multiple content tabs with expand/collapse icons in each panel. To simplify the process of closing all expanded sections, I have included buttons for expanding and collapsing all panels at once. While this feature is functioning correc ...

jqueryhtmlcss

Position of background image

Attempting to incorporate an image within a textbox in the following format (## representing the image): --------------------- | ## | --------------------- My progress so far: input.loading { background: url(/images/loader.gif) no ...

htmlcssformsinputtextbox

The <span> tag creating a surprise gap following a word

Using Angular4, I've come across an odd issue where one of my span elements is adding an extra space to the end of words like this: https://i.stack.imgur.com/H4TD7.png The only CSS properties that are set include font-family, -webkit-font-smoothing, ...

htmlcss

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

htmlcss

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

css

What is the best way to align an image in the middle of an image slider within a Bootstrap

Struggling to align the image properly in a Bootstrap 5 image slider carousel: https://i.sstatic.net/upPza.png <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class=&qu ...

htmlcssbootstrap-5

Rotating an image as it approaches the footer: a step-by-step guide

I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...

javascripthtmlcss

Tips for setting up unique colored speech bubbles based on user profiles in an Instant Messaging platform

If you were creating a real-time messaging platform that supports group chats with 3 or more users, and each message bubble needed to have a unique color, how would you approach this? Is there a method to dynamically change the CSS class of a speech bubb ...

javascriptcssnode.jsuser-interfacefrontend

What could be causing my CSS relative positioning to malfunction?

I am struggling to adjust the positioning of my divs using relative and absolute properties. Any advice on how to resolve this issue would be greatly appreciated. Thank you. Example Code: <div id="game"><img src="gta-game.jpg" height="100" width ...

csscss-position