0

The behavior is expected if the iframe is removed (or replaced with another HTML element). I have the following:

.container {
  display: flex;
  min-height: 300px;
}

.left {
  width: 500px;
  border: 1px solid blue;
}

.right {
  border: 1px solid red;
  flex-grow: 1;
}

.right>* {
  width: 100%;
  height: 100%;
  border: none;
}
<div class='container'>
  <div class='left'>
  </div>
  <div class='right'>
    <iframe>      
        </iframe>
  </div>
</div>

By trying the above code, the width: 500px does not seem to work for .left, the width is not rendered as 500px (we can inspect the element to know its actual width). I can however increase that value to make it expand as desired but the point here is the actual width (that we see) does not match with (likely always less than) the width we specify (500px).

It's weird because it should work as expected and yes it does work fine if we remove the iframe or simply replace it with another HTML element (a div, textarea, ...) Here is the prepared fiddle: https://jsfiddle.net/ropf2k95/

Could you think of any possible cause for that kind of weird behavior? How could we fix it to behave usually? Please note that I prefer to use container as a flexbox.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Hopeless
  • 4,397
  • 5
  • 37
  • 64
  • 2
    use `flex: 0 0 width;` instead of width so for width 500px use `flex: 0 0 500px;` – Nico Shultz Dec 07 '20 at 14:16
  • @NicoShultz nice, thank you, please explain it with more detail in a full answer, I'll accept it. – Hopeless Dec 07 '20 at 14:19
  • Here is a good answer about width/height with flex. https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width – Nico Shultz Dec 07 '20 at 14:21
  • @NicoShultz thank you, looks like it's fairly complicated so that you don't want to re-answer it. But still you can add another simpler answer that addresses this specific question if you want. I'll take a look at the link you share later. – Hopeless Dec 07 '20 at 14:28
  • In simple terms `flex: 0 0 width`, the first 0 states that, it won't grow, the second 0 means that element won't shrink and the width you are passing as third value is the basis which means, it should always be at least the specified width. – Prathamesh Koshti Dec 07 '20 at 14:46
  • @PrathameshKoshti thanks for your explanation, I know about the flex-grow & flex-shrink. The `flex-basis` to me is just like an initializing for the `width`, but looks like it's the min width (as you said) and the `width` is not actually ensured in this case for all items contained in `flex`. – Hopeless Dec 07 '20 at 14:50
  • 1
    Yes it can act as min width, only if you have any value for `flex-shrink`, since here shrink is 0, it will act as only width here – Prathamesh Koshti Dec 07 '20 at 14:53

0 Answers0