css - Flexbox : Child item not occupying 100% of parent, 只占据它的最小宽度

Question

我有一个 flex 显示和宽度设置为 100% 的父容器，它的子元素(子容器)设置为占用最大宽度 25%。

子容器上的按钮分配有最小宽度和最大宽度，如下所示。按钮往往不会占据 100% 的子容器，即使其最大宽度设置为 100%。

我试过添加 flex-items 和 flex self stretch，但它们并没有占据 100% 的宽度。

Fiddle 链接上的代码和样式:https://codesandbox.io/s/nice-field-9ckst当屏幕加宽时，它们似乎不会占据其父级的 100%，即整个屏幕的 25%。我正在尝试让按钮随时占据整个屏幕的 25%。欢迎提出任何建议。

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: nowrap;
}

.subcontainer {
  flex: 1;
  align-items: stretch;
  max-width: 25%;
}

.label {
  align-content: left;
}

.buttonStyle {
  display: flex;
  align-self: stretch;
  min-width: 150px;
  max-width: 100%;
}

<div class="App">
  <div class="subcontainer">
    <button class="buttonStyle">
          <div class="label">label1</div>
        </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
             <div class="label">label2</div>
        </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
          <div class="label">label3</div>
        </button>
  </div>
</div>

Answer 1

如果您想要全长按钮，只需删除最小宽度和最大宽度。

.App {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

.subcontainer {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 25%;
}

.label {
  align-content: left;
}

.buttonStyle {
  width: 100%;
}

<div class="App">
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label1</div>
    </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label2</div>
    </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label3</div>
    </button>
  </div>
</div>

Ctrl+C(复制)和< kbd>Ctrl+V(粘贴)。