max-width ignoring percentage value

Question

I have got two rows: The first one has 5 buttons, the second one has one div that should be as long as the buttons.

Here is my code:

BODY * {
  box-sizing: border-box;
}
.container {
  background: blue;
  width: 100%;
  height: 66px;
  position: relative;
}
.logo {
  background: red;
  width: 65px;
  height: 65px;
}
.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
}
.buttons > DIV {
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.buttons > DIV:first-child {
  max-width: 30%;
}
.search {
  width: 100%;
  background-color: yellow;
}

OKAY:
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">
      Search
    </div>
  </div>
</div>
Not okay: The gap between button 4 and border should be gone
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1 long long long long</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">
      Search
    </div>
  </div>
</div>

See this fiddle: https://jsfiddle.net/7a50j4oa/1/

The first button should have a max-width depending on a percentage.

If the button is bigger (max-width is used) the second row width isn't reduced.

This style is the problem (if I use px values everything works fine)

.buttons > DIV:first-child
{
  max-width:30%;
}

Any ideas how I could achieve this? Would flexbox help?

Thanks in advance.

Answer 1

Solution

Add this to your code:

.rightcontainer {
  width: 45%; /* or another percentage that works for you */
}

Revised Fiddle

---

Explanation

The max-width: 30% in your code is not working because you have not defined a width for the containing block.

Here's the code for your containing block:

.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
}

Here's the code for your button descendant:

.buttons > DIV:first-child { max-width: 30%; }

And here's what the spec says:

10.4 Minimum and maximum widths: min-width and max-width

These two properties allow authors to constrain content widths to a certain range.

percentage value

Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block.

That's why your max-width works with pixel but not percentage values.

BODY * {
  box-sizing: border-box;
}
.container {
  background: blue;
  width: 100%;
  height: 66px;
  position: relative;
}
.logo {
  background: red;
  width: 65px;
  height: 65px;
}
.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
  width: 45%;               /* NEW */
}
.buttons > DIV {
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.buttons > DIV:first-child {
  max-width: 30%;
}
.search {
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">Search</div>
  </div>
</div>
Not okay: The gap between button 4 and border should be gone
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1 long long long long</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">Search</div>
  </div>
</div>