宽度：适合内容； 在 Chrome 上工作但不在资源管理器上工作

Question

I built an app and everything is displayed perfectly in Chrome, but if I open the app in Windows Explorer the containers are smaller than they should be.

I'm using width: fit-content . Is this something that only works with Chrome.

How can I make it so that it works with all browsers?

Answer 1

width: fit-content is still in experimental stages, and is currently supported on Chrome 46.x and above (without vendor prefix), FF 3.x and above (with vendor prefix). Not supported on either IE or edge.
You can refer to compatibility chart here: Browser compatibility for width:fit-content

One alternative is to use display: table , which has the same effect as width: fit-content . Of course, there are other ways that you can try depending on what your requirements are.

 #fit-content { width: fit-content; background: pink; } #table { display: table; background: lightblue; } #normal { background: green; }

 <div id="fit-content"> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> fit-content </div> <div id="table"> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> table </div> <div id="normal"> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> normal </div>

Answer 2

It can be done with width:auto but only when an element is display: inline-block as well as setting the value as right:inherit or left:inherit .

Example:

.my_div {
    width: auto;
    display: inline-block;
    right:inherit; /* align to left */
}

Answer 3

Have similar problem. In one div, have others with display:inline-block

For parent div use white-space : nowrap;

Don't forget to set to child's div white-space : normal;

.parent {
    width: max-content;
    white-space : nowrap;
}
.parent .child {
    display: inline-block;
    white-space : normal;
}

HTML example

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 4

another alternative is to use width:auto; This works sometimes but it depends on your specific case.

Answer 5

I had a similar problem, fixed it this way. Instead of using width: fit-content; you can use the snippet below.

inline-flex is well supported (even on IE11).

In the example below, flex: none; is only useful if the parent is set as a display: flex; .

.element {
  display: inline-flex;
  flex: none;
  width: auto;
}

Answer 6

ops. my answer came in 4yrs later.

I was building mobile page and had the issue with width: fit-content; . the code below worked for me:

header nav ul {
   display: table;
   margin: 0 auto;
}

Answer 7

display: inline-table对我有用