Edge wrong rendering of <select multiple style="width:100%"> wrong rendering in Edge

Confirmed Issue #13981439 • Assigned to Bogdan B.


Bernhard K.
Sep 28, 2017
This issue is public.
Found in
  • Microsoft Edge
Reported by 6 people

Sign in to watch or report this issue.

Steps to reproduce


  1. Define a container (DIV or table) with a certain width, let’s say 800px,
  2. Define some columns in it (or if DIV, some inline-block divs), let’s say four columns, 60%/10%/10%/20%.
  3. Place a <select multiple style="100%"> in the 60% column.
  4. Place some options in the select, one of them with text of around 10-20 words (80-100 chars).
  5. Place some words or a   in the other columns.
  6. Load the page and see that Edge expands the select to the width of the option with the longest content. The column where the select is placed in expands to more than its 60% and the other columns become smaller.
  7. Remove "multiple", load again and see that now the select has a real width of 100%, its column stays at 60% all stays in appropriate shape.

In FireFox, IE11 and Chrome the <select multiple style="width:100%"> doesn’t affect the containers with. So I suppose it’s a rendering issue of Edge.

Please view the following example page in different browsers to see the behavior:


0 attachments

    Comments and activity

    • Edge build information
      Microsoft Edge 40.15063.0.0
      Microsoft EdgeHTML 15.15063

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “wptcomptri@microsoft.com”

      Changed Assigned To to “bbrinza”

      Changed Assigned To from “bbrinza” to “Bogdan B.”

      Changed Status to “Confirmed”

    • A workaround for this problem is to add table-layout: fixed on the table, when using the select element within the table. This will force the select box to follow the table lay-out.

    You need to sign in to your Microsoft account to add a comment.

    Sign in