html - 最大宽度忽略百分比值

Question

我有两行:第一行有 5 个按钮，第二行有一个 div，应该和按钮一样长。

这是我的代码:

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>

请参阅此 fiddle :https://jsfiddle.net/7a50j4oa/1/

第一个按钮应该有一个 max-width 取决于百分比。

如果按钮更大(使用max-width)，则第二行宽度不会减小。

这种风格就是问题所在(如果我使用 px 值一切正常)

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

有什么想法可以实现吗？ flexbox 有帮助吗？

提前致谢。

Answer 1

解决方案

将此添加到您的代码中:

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

Revised Fiddle

---

解释

您的代码中的 max-width: 30% 不起作用，因为您没有为包含 block 定义宽度。

这是您的包含 block 的代码:

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

这是您的按钮后代的代码:

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

规范是这样说的:

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.

这就是为什么您的 max-width 适用于像素值而不适用于百分比值。

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>