Flex - make parent width of children?

Question

I have a flex box layout. I want the width of .outer-2 to be the width of its children, with .outer-1 and outer-3 taking up the rest of the space.

How can I achieve this?

JSFiddle

.container {
  display: flex;
}

.outer-1 {
  background: red;
  height: 100px;
  flex: 1;
}

.outer-2 {
  display: flex;
  flex: 1;
}

.outer-3 {
  background: blue;
  height: 100px;
  flex: 1;
}

.inner {
  flex-basis: 30px;
  background: green;
  height: 100px;
  margin: 0 3px;
}

<div class="container">
  <div class="outer-1">
  </div>
  <div class="outer-2">
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
  </div>
  <div class="outer-3">
  </div>
</div>

Is it what you wants? [Fiddle](https://jsfiddle.net/Muhammad_Usman/v8tgyvbd/1/) — Mohammad Usman, Mar 17 '17 at 13:19
Muhammad Usman - almost, although in your example flex basis has no effect. — panthro, Mar 17 '17 at 13:23
Is using CSS grids an option? This layout might be easier with that. — Brian Glaz, Mar 17 '17 at 13:35
Two steps: (1) remove `flex: 1` from `.outer-2`. Telling the middle item to share equal width with its siblings is counter to your objective. (2) replace `flex-basis: 30px` with `width: 30px`. `flex-basis` isn't working as expected in this case. Not sure why. Maybe a bug. https://jsfiddle.net/v8tgyvbd/3/ — Michael Benjamin, Apr 02 '17 at 14:38

chazsolo · Accepted Answer · 2017-03-17T13:46:45.670

2

You need to change the flex properties for the second child of container preventing it from growing to fit it's parent. That, and adding a width or min-width to each .inner element will prevent their parent from collapsing them down.

.container{
  display: flex;
}
.outer-1{
  background: red;
  height: 100px;
  flex: 1;
}
.outer-2{
  display: flex;
  flex: 1;
}
.outer-3{
  background: blue;
  height: 100px;
  flex: 1;
}
.inner{
  width: 30px;
  flex: 1 0 30px;
  background: green;
  height: 100px;
  margin: 0 3px;
}

<div class="container">
  <div class="outer-1">
  
  </div>
  <div class="outer-2">
      <div class="inner">
  
      </div>
      <div class="inner">
  
      </div>
      <div class="inner">
  
      </div>
  </div>
  <div class="outer-3">
  
  </div>
</div>

edited Mar 17 '17 at 13:46

answered Mar 17 '17 at 13:24

chazsolo

7,873
1
20
44

Thanks but doesn't use flex, your setting min-width. – panthro Mar 17 '17 at 13:26
Could you explain what you expect the `.inner` elements to do? – chazsolo Mar 17 '17 at 13:29
I want to set the width of the inner elements to be 30px using flex basis. The width of outer-2 should amount to the width of it's children. – panthro Mar 17 '17 at 13:30
Check my edit - is this accurate? Without setting width or min-width on the inner children, outer-2 is going to collapse them down. – chazsolo Mar 17 '17 at 13:34
Well I guess setting width is the only way! – panthro Mar 17 '17 at 13:41

Flex - make parent width of children?

1 Answers1