Why aren't children of flex element being displayed with the width I set for it?

Question

I've got 5 children divs inside a parent div whose display is set to flex.

I've given the children a width of 100px each, but they are only being rendered at 1/5th of the width of the parent div.

I've set the parent div with overflow: scroll in the hopes it will make the children expand to the set size, but it does now. How do I get the children divs to be the width I give it?

.parent {
  display: flex;
  width: 350px;
  height: 150px;
  background-color: #dedede;
  align-items: center;
  overflow-x: hidden;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

On ".child", set minimum width to 100px and On parent set overflow-x to scroll — Murali Nepalli, Nov 14 '19 at 03:18

Ori Drori · Accepted Answer · 2019-11-14T03:16:58.390

1

Change flex-shrink to 0, so to the flexbox won't shrink the children to fit the parent's width:

.parent {
  display: flex;
  width: 350px;
  height: 150px;
  background-color: #dedede;
  align-items: center;
  overflow-x: auto;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
  flex-shrink: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child always-show"></div>
</div>

Another option is to set to use the flex shortcut to set growth 0/shrink 0 /basis 100px, and remove the width declaration:

.parent {
  display: flex;
  width: 350px;
  height: 150px;
  background-color: #dedede;
  align-items: center;
  overflow-x: auto;
}

.child {
  flex: 0 0 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child always-show"></div>
</div>

edited Nov 14 '19 at 03:16

answered Nov 14 '19 at 03:10

Ori Drori

183,571
29
224
209

shrink will die in some new browser – Cuong Hoang Nov 14 '19 at 03:11
Shrink is part of the flexbox standard, and supported by all browsers the support flex. Why should it die in a new browser? – Ori Drori Nov 14 '19 at 03:12
https://www.w3.org/TR/css-flexbox-1/#flex-property – Cuong Hoang Nov 14 '19 at 03:13
The `flex` shorthand contains the shrink. It doesn't replace it. – Ori Drori Nov 14 '19 at 03:17

Murali Nepalli · Answer 2 · 2019-11-14T03:52:41.437

1

.parent {
  display: flex;
  width: 350px;
  height: 150px;
  background-color: #dedede;
  align-items: center;
  overflow-x: scroll;
}

.child {
  min-width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 5px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child always-show"></div>
</div>

Just posting an alternative solution to "flex-shrink" if needed, Set min-width on "child" elements to 100px.

edited Nov 14 '19 at 03:52

answered Nov 14 '19 at 03:21

Murali Nepalli

1,588
8
17

hmm why does `min-width` work but `width` doesn't? – CodyBugstein Nov 14 '19 at 03:31
@CodyBugstein When you speicfy "width", it can still be shrinked or scaled down based on the parent element's properties. But when you specify "min-width" it takes precedence over all the other calculations. – Murali Nepalli Nov 14 '19 at 03:49
@CodyBugstein because it was defined to work like that in the Flexbox context: https://stackoverflow.com/q/36247140/8620333 – Temani Afif Nov 14 '19 at 08:43

Why aren't children of flex element being displayed with the width I set for it?

2 Answers2