Flex div (do not stretch full width)

Question

I have 2 divs and using flex:

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: red;
}

.item {
  height: 40px;
  margin-bottom: 10px;
}

<div class="parent">
  <div class="item">something here</div>
</div>

My issue is that the parent is 100% the width of the screen.

How can I make it so it stay's as large as the item content, so auto grows (when there's more text is grows or shrinks with less)?

See here: https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container/40141200 — AbsoluteBeginner, Dec 07 '20 at 12:11

score 1 · Accepted Answer · answered Dec 07 '20 at 11:06

1

Use inline-flex instead of flex:

display: inline-flex;

answered Dec 07 '20 at 11:06

fahimchowdhury

424
4
8

Flex div (do not stretch full width)

1 Answers1