FlexBox - specify a certain child div to control the width?

Question

With flexbox, the childs by default resize according to the widest element.

Is there some way to define that a particular child will control the width, even if it's smaller? With selectors maybe?

Codepen: https://codepen.io/dsomekh/pen/rwEYYE

Code:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.first {
  border: 1px solid red;
  margin-bottom: 0.5vw;
}

.second {
  border: 1px solid red;
}

.wrapper {
  font-family: Calibri;
  display: flex;
  flex-direction: column;
}

<html>

<div class="center">
  <div class="wrapper">
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
    <div class="second">This div is smaller.Can it control the width?</div>
  </div>
</div>

</html>

Just to clarify, do you want the smaller child to have their own width, and only be as big as its contents or do you want the smaller child to make a bigger div smaller than its contents? — Kanstantsin Arlouski, Jul 19 '17 at 12:37
you mean you want all divs to be no wider than the div which would naturally be narrowest? — ADyson, Jul 19 '17 at 12:42
I want one specific div to control the width of the other elements. If it's bigger, they become bigger. If it's smaller, the others become smaller. — David Somekh, Jul 19 '17 at 12:50
@DavidSomekh - can't be done with flex box. All flex-item's in a container cannot be sized relative to an (unspecified) single flex-item's intrinsic size. I feel like your asking too specific a question (as is often the case on SO) - what is the desired outcome? — Adam Jenkins, Jul 19 '17 at 12:53

Adam Jenkins · Answer 1 · 2017-07-19T13:00:00.263

Here's the important CSS rule to know:

flex: {number} {number} {number};

The third number is the default size of a flex-item (width, if the flex item is in a row). By default it is auto meaning a flex-item's default size is dictated by it's content.

The first and second numbers are proportionally how much it can grow or shrink by, respectively, compared to other flex items if there is room along the main axis (again, width if this flex item is in a row).

So, you cannot set the default size of a flex-item to be relative to a sibling's intrinsic size - i.e. that which is dictated by it's content - but you can set the default size of a flex-item (and it's sibling items) to all be the same and let them grow or shrink.

I find myself often doing the following:

flex: 1 0 0

on flex items which cause siblings to all be the same size.

All flex-items start out with a default size of 0 and they all grow equally - as given by the first number being the same for all flex items (here it's a one, but it could be any positive number as long as it's the same for every sibling) - as they need to.

Best flexbox learning around is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

EDIT

If you knew, in advance, which item was going to be intrinsically bigger, you could probably do it by setting that item to flex: 0 0 auto and letting all other flex-item's grow from flex: 1 0 0, but I have a feeling you don't know in advance which one is bigger.

.wrapper { display: flex; }
.wrapper>div { border: 1px solid #000; }
.first { flex: 1 0 0; }
.second { flex: 0 1 auto; }

<div class="center">
  <div class="wrapper">
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
    <div class="second">This div is smaller.Can it control the width?</div>
  </div>
</div>

FlexBox - specify a certain child div to control the width?

1 Answers1