Использование CSS-функции min() приводит к увеличению ширины предков. ⇐ Html

[Anonymous]

У меня возникли проблемы с использованием функции min() для свойства max-width изображения.Размер изображения, например, 800 пикселей, поэтому я установил максимальную ширину: 400 пикселей. Это делает его шириной 400 пикселей.
Теперь, если я установлю максимальную ширину: min(400px, 100%), изображение останется шириной 400 пикселей, но визуально оно будет иметь ширину 400 пикселей, но займет 800 пикселей пространства внутри контейнера.
Это происходит, когда я использую display: inline-flex в контейнере. Если я использую display: inline-block, ширина контейнера всегда фиксируется на 800 пикселей, независимо от того, использую ли я 400 пикселей или минимум (400 пикселей, 100%).
Я включил пример ниже.

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button');
const b = document.querySelector('b');
const img = document.querySelector('img');
let useMinFunction = true;
button.addEventListener('click', () => {
if (useMinFunction) {
img.style.setProperty('max-width', 'min(400px, 100%)');
b.textContent = 'min(400px, 100%)';
} else {
img.style.removeProperty('max-width');
b.textContent = '400px';
}
useMinFunction = !useMinFunction;
});
});

Код: Выделить всё

article {
display: inline-block;
border: 2px solid;
padding: .5rem;
}
section {
display: inline-flex;
gap: .5rem;
flex-direction: column;
color: red;
border: 2px solid;
padding: .5rem;
}
img {
max-width: 400px;
border: 2px solid purple;
padding: .5rem;
}

Код: Выделить всё

Document




article


section
[img]https://mms.businesswire.com/media/20210623005665/en/887084/23/logo-stackoverflow-2.jpg[/img]

Click to toggle max-width between "min(400px, 100%)" and "400px"

Current max-width: 400px[/b]

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-in-width