Fix width of a flex column based on another

Question

I have a wrapper of 500px and 2 columns. The second column is 200px width (flex: 0 0 200px).

If in the first there is an element > 300px the first column will expand according to this element.

How can I stop the first column from growing, basing only the width of the wrapper and the second column?

Fiddle here: https://jsfiddle.net/b58aatdr/3/

#hello {
  display: flex;
  width: 500px;
}
#hello > div {
  height: 50px;
}
#hello > div:first-child {
  background-color: yellow;
}
#hello > div:last-child {
  background-color: red;
  flex: 0 0 200px;
}
#baddiv {
  width: 400px;
  height: 20px;
  background-color: purple;
}

<div id="hello">
  <div>
    <div id="baddiv"></div>
  </div>
  <div></div>
</div>

If you have a problem with your code, your question needs to contain an [MCVE]. And unless you have a Sass->CSS compilation issue, **only provide the compiled CSS (and the necessary HTML to reproduce the problem)**. — cimmanon, Mar 04 '16 at 20:58
You fail pretty hard at reading, the code has to be **in the question itself**. — cimmanon, Mar 05 '16 at 11:59
`min-width: 0`? See [How can I get FF 33.x Flexbox behavior in FF 34.x?](http://stackoverflow.com/q/26895349/1529630) — Oriol, Mar 06 '16 at 15:42
@Oriol OP looks for a solution where not to have to give the first column any width, it should use its parent + right sibling to set the max width for the first column ... and I'm now trying to get an answer why. ... Also my answer cover the 2 ways how to do that, though I suggest to use max-width on the first column if to keep `flex`. — Asons, Mar 06 '16 at 15:45

Asons · Accepted Answer · 2016-03-06T15:36:07.537

1

Set max-width: 300px to your first div if you want it to adjust itself up to 300px and use width: 300px; if you want it to always be 300px even if content is less wide.

Update based on comment

The 2:nd div group uses another trick, position: absolute, where one doesn't need to set any width, it uses the parent and the right div to restrict the left div from growing beyond the 300px.

Note also, this is a normal behavior how element works, if they don't have a fixed/max width set, they grow (or in some cases wrap) to fit their content.

Update 2 based on comment

The 3:rd div group uses display: table instead of flex, where one doesn't need to set any width.

.hello {
  display: flex;
  width: 500px;
}
.hello > div {
  height: 50px;
}
.hello > div:last-child {
  background-color: red;
  flex: 0 0 200px;
}
.baddiv {
  width: 400px;
  height: 20px;
  background-color: purple;
}

/* alt. 1 */
.hello.nr1 > div:first-child {
  background-color: yellow;
  max-width: 300px;
}

/* alt. 2 */
.hello.nr2 > div:first-child {
  flex: 1;
  position: relative;
  background-color: lime;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* alt. 3 */
.hello.nr3 {
  display: table;
  table-layout: fixed;
  width: 500px;
}
.hello.nr3 > div {
  height: 50px;
  display: table-cell;
}
.hello.nr3 > div:first-child {
  background-color: cyan;
}
.hello.nr3 > div:last-child {
  background-color: red;
  width: 200px;
}

<div class="hello nr1">
  <div>
    <div class="baddiv"></div>
  </div>
  <div></div>
</div>

<br>

<div class="hello nr2">
  <div>
    <div class="inner">
      <div class="baddiv">
      </div>
    </div>
  </div>
  <div></div>
</div>

<br>

<div class="hello nr3">
  <div>
    <div class="baddiv"></div>
  </div>
  <div></div>
</div>

edited Mar 06 '16 at 15:36

answered Mar 05 '16 at 08:54

Asons

84,923
12
110
165

I was searching for a solution that not includes the set of the first div's width... otherwise yes, it could be a solution – Oscar Fanelli Mar 05 '16 at 23:02
@OscarFanelli Using `max-width` is the way to tell an element to not go wider than a certain value (so you don't set it to anything, just tell when to stop). How else do you think it should know when to stop? – Asons Mar 05 '16 at 23:05
Thanks to it's div parent and div brother – Oscar Fanelli Mar 06 '16 at 10:45
@OscarFanelli I updated my answer with a second sample, which does what you ask, though if you ask me, the 1:st is preferred as it has less markup and therefore becomes cleaner. – Asons Mar 06 '16 at 11:10
Thanks @LGSon, it's not the solution that I was searching for, maybe there is another one, but I think for now I will use your first solution ;) – Oscar Fanelli Mar 06 '16 at 14:52
1

@OscarFanelli I updated my answer with a 3:rd sample, which does what you ask, without any extra markup, where I used `display: table`. Now there are no other way to do it, without setting a width to the 1:st div. .. May I ask why you need a solution where width/max width must not be set? – Asons Mar 06 '16 at 15:40
Thanks @LGSon! This is great :) – Oscar Fanelli Mar 06 '16 at 16:35
to make everything more clean and re-usable – Oscar Fanelli Mar 06 '16 at 16:37

Fix width of a flex column based on another

1 Answers1