Wrapping flex items inside a table in IE11: A guide

I am facing an issue with the code (codepen here) that works in normal browsers but not in IE11...

I need the cards to be wrapped within the displayed window vertically, without any horizontal scrolling. https://i.sstatic.net/PnxR9.png 

.table {display: table;}
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px;}
<div class="table">
<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
</div>
</div>

The current layout does not work as expected in IE.

I understand that removing the wrapping "table" will fix the issue, but I am unable to make that change. Therefore, please try to find a solution while keeping the table structure intact...

htmlcssflexboxinternet-explorer-11

Answer №1

By adding 

table-layout: fixed; width: 100%;
to the parent .table wrapper, the issue in IE11 was resolved for me. However, it's advisable to avoid using a table layout unless necessary for displaying tabular content. In such cases, it's best to utilize semantic <table> elements.

To observe the stacking/wrapping, you might need to view the Snippet in full screen, especially on higher resolutions. When un-maximized in IE on a 26" 1080p monitor, only a single column is displayed due to the max-width constraints of the site's columnar layout.

.table {display: table; table-layout: fixed; width: 100%; }
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px; }
<div class="table">
    <div class="container">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
    </div>
</div>

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

Implement Java code to transform HTML into XML format

<TBODY> <TR> <TD colSpan=4>Details of your Travel</TD></TR> <TR></TR> <TR> <TD colSpan=4>Booking Reference : XXX</TD></TR> <TR></TR> <TR> <TD>Passenger& ...

javahtmlxmlnsxmlparser

How to align content in the center horizontally and vertically using HTML and CSS

I'm having trouble centering my content both vertically and horizontally on the page. Can anyone provide assistance? Thank you. <style type = "text/css"> #loginMenu { border:5px solid green; padding:10px 10px 10px 10px; background-color:#FF9; ...

htmlcssformat

When the page is scrolled to 50 pixels, a modal pop-up will appear

I attempted to use cookies to store a value when the user clicks on a popup to close it, ensuring that the popup does not show again once closed. However, I am encountering an issue where the popup continues to open whenever I scroll, even after closing it ...

javascriptjqueryhtmltwitter-bootstrap-4

Explore the description list using Selenium in Python

How do I extract the text from the <dd> tag that corresponds to the <dt> labeled as Commodity Code? `<dl class="dl"> <dt>Trading Screen Product Name</dt> <dd>Biodiesel Futures (balmo)</dd> ...

pythonhtmldjangoselenium

Error message: Uncaught SyntaxError: Unexpected import token encountered in (ReactJS, Babel, Webpack, NodeJS)

I've been struggling for days to get this simple Hello World app working using ReactJS and Babel. I have installed node.js and webpack, but unfortunately, I keep encountering the following error: Uncaught SyntaxError: Unexpected token import Below ...

htmlnode.jsreactjswebpackbabeljs

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

What is the best way to eliminate excess padding or margin within an absolute block?

I am working on a project where I want to replicate an illustration similar to this one However, I am encountering an issue with the padding or margin. Here is what I have attempted so far: http://jsfiddle.net/kl94/RZPRS/2/ .circles { background-colo ...

htmlcss

"Utilizing Bootstrap to create a space-saving table layout with an

Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of ...

htmlcsstwitter-bootstraphtml-table

Encountered issue while submitting HTML form using POST method and jQuery

Here is the code for my form: <form id="ereserva" action="index.php" method="post"> <fieldset> <label for="id">ID</label> <input type="id" name="ei" id="eid" readonly class="id text ui-widget-content ui-corner ...

phpjqueryhtmlajax

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

javascripthtmlreactjsdrag-and-dropantd

Is it possible to transform PDF files into HTML on an iOS device?

Task : Transforming a pdf file into an HTML file For example: We have a pdf file available at the link below that needs to be converted to an HTML file. Research : I searched online and discovered several methods to convert HTML to PDF such as Convert ...

htmlobjective-ciospdf

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...

javascripthtmlajaxvue.jsaxios

The jQuery selector seems to be ignoring elements within a different scope

I'm attempting to perform an ajax request to a specific page on my website using this particular element as a direct child of the body tag: <div class="container" id="wantme"><div class="content"></div></div> There is only on ...

javascriptjqueryhtmldom

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

htmlcsstwitter-bootstrapflexbox

What is the best way to include default text in my HTML input text field?

Is it possible to include uneditable default text within an HTML input field? https://i.stack.imgur.com/eklro.png Below is the current snippet of my HTML code: <input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Off ...

javascripthtmlcss

Need help resolving an issue with an HTML header that's overlapping in JavaScript?

Hey there! I was working on implementing a dynamic header that resizes as you scroll on the page. I also decided to try out Headroom as an additional solution, and it seems to be functioning well in terms of hiding the header. You can check out my progress ...

javascripthtmlcss

Is there a way to send a Python list to Django?

I'm in the process of setting up a website where I can retrieve a JSON list from my PRTG. Currently, I have successfully implemented code in the console that filters out sensors with a status of DOWN. However, I am facing difficulties in posting this ...

pythonhtmllist

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

javascripthtmlangularjs

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

csstwitter-bootstrap