Ширина элемента варьируется в Chrome и в Internet Explorer

Question

У меня есть следующий код,

<div class="Wrapper" style="width: 100%; height: 20%; justify-content: space-between;">
    <div class="customText" style="width: auto; font-size: 33px; float: left; min-width: 10%;">Test</div>
    <div class="valueContainer" style="height: 100%; max-width: 90%;">
        <div class="value" id="containercardElementCard1_ActValue" style="width: auto; color: rgb(104, 98, 98); line-height: 55px; font-size: 33px; max-width: 100%;" data-tooltip="Value: ">7,632,789,549</div>
    </div>
</div>

Здесь ширина оболочки 247px.

В Chrome customText div занимает 38.5px width, а valueContainer принимает 208.4px, тогда как в IE customText принимает 60.3px, а valueContainer принимает 186.6px

Я подозреваю, что свойство max-width не работает в IE.

Answer 1

Причина этой ошибки: IE просто отказывается указывать размер элемента меньше установленного размера шрифта.

Лучший способ справиться с этой ошибкой - применить overflow: hidden к элементу, чтобы он упал на предполагаемую высоту.