Flex items are stretching

Question

How do I avoid items in flex column stretching to full width? I want it to be original size as created.

.myForm {
  display: flex;
  flex-direction: column;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Right not the inputs and the buttons have no width given. Just give them some width. — Azu, Dec 07 '21 at 13:03

Samuel Anyanwu · Answer 1 · 2021-12-07T13:17:37.980

1

In CSS the default value for the flex property align-items is stretch which as you would guess stretches the children of the flex parent to full width. You can change it something else to fix that. For instance

.myForm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Read more about this property here https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

edited Dec 07 '21 at 13:17

answered Dec 07 '21 at 13:11

Samuel Anyanwu

295
3
12

Your answer is work very well but different approach from my. So, please don't edit something that is not related in my answer. I'll up vote for you because it's work and 100% flex CSS. – vee Dec 07 '21 at 13:17
I know sorry, I was trying to edit mine, and somehow ended up editing yours – Samuel Anyanwu Dec 07 '21 at 13:18
No problem :-) I've been mistake too. – vee Dec 07 '21 at 13:19

score 0 · Accepted Answer · answered Dec 07 '21 at 13:09

Use max-width: max-content;, or width: max-content; on child element.

.myForm {
  display: flex;
  flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
    max-width: max-content;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

score -1 · Answer 3 · answered Dec 07 '21 at 13:41

You mentioned display:flex; so your elements size is also flexed to column size. You can provide css property for your first level child individually like

.myForm > * {
    width: fit-content;
}

.myForm {
  display: flex;
  flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
    width: fit-content;
}

<form class="myForm">
  <input type="text" />
  <input type="text" />
  <button>Test</button>
</form>

Flex items are stretching

3 Answers3