2
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  width: 100%;
  height: 200px;
  display: flex;
}

.box1 {
  width: 25%;
  min-width: 400px;
  height: 100%;
}

.box2 {
  width: 75%;
  height: 100%;
}

So what I'm trying to do is make a div that is 100% width. The child elements will be 25% and 75%. I want the 25% div to have a min-width. So I want the 75% div to automatically adjust to just filling the remaining space when the minimum width brings box1 over 25%.

Neither flex-grow or flex-shrink seem to work for me. I don't want box2 to shrink because it should be bigger than box1 for the majority of the time. I don't want box2 to grow because it will also sometimes be smaller than box1.

FYI: I should note that I'm using this with a slick.js slider. I have my two divs untouched by the plugin though, so my slider is wrapped in an additional container (box2). The slider container is taking 100% width of box 2. I know flex seems to adjust on the fly normally in situations like this, so if I had a paragraph in box2, the width will adjust dynamically, but having the slider seems to be making it really finicky, and it needs the containing box2 to have a width that's working properly.

Dale Spiteri
  • 767
  • 1
  • 9
  • 21
  • just fiddled your code, changing min-width to 200px and added background-colors to see it, works just fine for me: https://jsfiddle.net/s45mz1ur/1/ – Marcel Schmid Sep 25 '18 at 14:47
  • why not simply `flex:1` on the box2 without adding any width? .. also no need to add height:100% they will stretch by default – Temani Afif Sep 25 '18 at 14:47
  • I've tried the fiddle, and it works, but it won't work with the slider inside. So I think I need proper widths rather than on the fly flexbox just doing it's best. I'm not realy sure how to explain it. @MarcelSchmid – Dale Spiteri Sep 25 '18 at 14:54
  • @TemaniAfif I tried that, but it winds up just giving `box2` no width for some reason. I know this works in simplified code, but for some reason throwing the slick slider inside ruins flex boxes naturally problem solving. – Dale Spiteri Sep 25 '18 at 14:56

1 Answers1

2

.container {
  display: flex;
  height: 200px;
  border: 1px dashed black;
}

.box1 {
  flex: 1 0 400px; /* flex-grow, flex-shrink, flex-basis */
  max-width: 25%;
  background-color: green;
}

.box2 {
  flex-grow: 1;
  background-color: orangered;
}
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

So what I'm trying to do is make a div that is 100% width.

Done. With display: flex a block-level container is set, which occupies 100% width of the parent.

The child elements will be 25% and 75%. I want the 25% div to have a min-width.

Okay. .box1 has a minimum width of 400px (as set in your code) and a maximum width of 25%.

So I want the 75% div to automatically adjust to just filling the remaining space when the minimum width brings it over 25%.

Then don't use 75%. Instead use flex-grow: 1, which tells .box2 to consume space not used by .box1.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I've tried something similar to this (and also just tried exactly this and got the same result). My box2 (i'm assuming because of the slick slider) is coming in with a width of `759200px`. So because the contents of slick slider create a giant track for the infinite slides, it must be effecting the width that `flex-grow` is deciding. If it's set to 75%, it works fine, if it's set to grow, it becomes **massive** and takes up much more than the remaining space. – Dale Spiteri Sep 25 '18 at 15:11
  • Try `overflow: auto` or `min-width: 0` on `.box2`. – Michael Benjamin Sep 25 '18 at 15:13
  • I used `min-width: 0` and it worked... I have absolutely no understanding why it did though! – Dale Spiteri Sep 25 '18 at 16:28
  • Flex items are set, by default, to `min-width: auto`. This means they cannot be smaller than their content. With `min-width: 0`, you're overriding that initial setting. It's explained in detail here: [Why don't flex items shrink past content size?](https://stackoverflow.com/q/36247140/3597276). – Michael Benjamin Sep 25 '18 at 16:54