I’m using flex in a number input component to render custom “+” and “-” buttons next to the input itself. The buttons use aspect-ratio: 1/1; to ensure they are always square, but I can’t seem to get the buttons’ container to honor that. Instead, the buttons are overflowing the container, almost as if the container is measuring their size without the aspect-ratio property. When I remove that property the container renders at the appropriate size.
Some example code:
.input-interior { box-shadow: 0 1px 0 blue; box-sizing: border-box; display: flex; flex-grow: 1; position: relative; width: 600px;}.input-container { flex-grow: 1; min-width: 0;}input { appearance: textfield; background-color: transparent; border: none; box-shadow: none; box-sizing: border-box; color: rgb(15 15 15); height: 80px; margin: 0; outline: none; padding-left: 8px; padding-right: 8px; padding-top: 5px; padding: 0; width: 100%;}.input-actions { box-shadow: 0 0 0 1px green; box-sizing: border-box; column-gap: 8px; display: flex; flex-shrink: 0; padding: 8px;}button { border: none; margin: 0; padding: 0; aspect-ratio: 1 / 1; min-height: 44px; align-items: center; display: flex; justify-content: center; min-width: auto; width: auto;}<div class="input-interior"><div class="input-container"><input min="0" step="1" type="number" value="0" /></div><div class="input-actions"><button type="button">-</button><button type="button">+</button></div></div>How do I get the .input-actions container to honor the dynamic size of its children?