0

I'm struggling way more than I should with this. I can't fit a 30x30px <button> in this flex container; it's overflowing over the red border. My attempts so far have been with making sure the button is properly set, but maybe it's related to the input taking a default width that flex just ignores.

.container {
  width: 200px;
  border: solid 1px red;
  box-sizing: border-box;
}

.flex {
  display: flex;
  gap: 10px;
  width: 100%;
}

input {
  flex: 1;
}

button {
  flex: 0 0 30px;
  height: 30px;
  aspect-ratio: 1;
}
<div class="container">
  <div class="flex">
    <input type="text">
    <button>X</button>
  </div>
</div>
Robert Bradley
  • 548
  • 2
  • 21
Matias
  • 190
  • 13

1 Answers1

1

Just add min-width: 10px; (or whatever value you want that's small) to the input field.

The <input> has a default size: 20;. Reference

.container {
  width: 200px;
  border: solid 1px red;
  box-sizing: border-box;
}

.flex {
  display: flex;
  gap: 10px;
  width: 100%;
}

input {
  flex: 1;
  min-width: 10px;
}

button {
  flex: 0 0 30px;
  height: 30px;
  aspect-ratio: 1;
}
<div class="container">
  <div class="flex">
    <input type="text">
    <button>X</button>
  </div>
</div>
Robert Bradley
  • 548
  • 2
  • 21
  • Thanks! found a full explanation on this post as well, seems like input comes with a default width. https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container – Matias May 04 '23 at 16:44