Bootstrap column and children max-width

[r-obeen]

• Operating system and version : Mac, MacOs 10.15.3
• Browser and version : Google Chrome v 80.0.3987.163

Hello, I have a weird issue where a child element of a .col that has both a width:500px max-width:100% will kind of ignore the max-width at a critical responsive width where the child element should instead max-width 100% to its parent's width (.col)

HTML

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="item-1"></div>
        </div>

        <div class="col">
          <div class="item-2"></div>
        </div>
      </div>
    </div>

    <div class="col-auto">
      <div class="item-3"></div>
    </div>
  </div>
</div>

CSS

.container-fluid {
  height: 60px;
  background: #f4f4f4;
}

.item-1 {
  width: 140px;
  height: 40px;
  background: red;
}

.item-2 {
  width: 500px;
  height: 40px;
  max-width: 100%;
  background: green;
}

.item-3 {
  width: 400px;
  max-width: 100%;
  height: 40px;
  background: orange;
}

Here is an example : https://jsfiddle.net/nywj82co/ (try playing with the viewport's width)

Any idea how to fix this issue ?

[werner33]

If I understand your problem correctly, I think you are using max-width incorrectly.

Max-width is a limiting factor, ie. it can never make your element exceed an explicit width. Between

width: 500px; max-width: 100%

width will govern, when the parent exceeds 500px.

When the parent is less than 500px, your element is taking a max width of 100% of its parent.

Let me know if that makes sense or if I am misunderstanding the question.

Thanks!

[allisaid]

Hi there I think in order child element to get 100% of his parents value, you need to set value for the parent.

.col {
width: 550px; }

[herbalite]

Learned yesterday of new CSS functions :) . Depending on the target users and browsers this might be an easier solution

The 3 functions are:

min ( ..., ... )
https://developer.mozilla.org/en-US/docs/Web/CSS/min

max ( ..., ... )
https://developer.mozilla.org/en-US/docs/Web/CSS/max

clamp ( ..., ..., ... )
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
Notice that clamp() isn't supported yet in Safari, but when reading about it on MDN, it becomes clear that it is a convenience function, and has a workaround with max() and min()

[herbalite]

I think your problem is because max-width does not inherit from parent elements.

As it is, max-width will always be ignored, and with 500px is being applied.

[r-obeen]

@werner33 @herbalite Okay, both your answers make sense...
Do you have any idea what I should do instead to achieve my goal ?
Thanks for your help so far

[herbalite]

I notice nested row and col classes. That makes it hard for me to understand what you are trying to achieve visually.

If it is about nested columns, have a look at the following demo of nested columns.
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=nested-columns

[mdo]

Converted this to a discussion since it's an open-ended how-to/troubleshooting question. :)

[r-obeen]

Thanks 🙏🏾