Flexbox：子项不占父项的 100%，仅占用其最小宽度答案

【问题标题】：Flexbox : Child item not occupying 100% of parent,occupies only its minimum widthFlexbox：子项不占父项的 100%，仅占用其最小宽度
【发布时间】：2020-02-03 20:55:06
【问题描述】：

我有一个 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>

【问题讨论】：

标签： css flexbox

【解决方案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 和 ctrl+v 时不要忘记将 'class' 更改为 'className'

【讨论】：

【解决方案2】：

演示链接：https://codesandbox.io/s/recursing-leavitt-bqccz

移除 flex:1;从 .subcontainer 类并将 .subcontainer 类 max-width:100% 更改为 min-width:100%;.

.subcontainer {
  align-items: stretch;
  min-width: 25%;
}

将 .buttonStyle 类的 max-width:100% 更改为 width:100%。

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

尝试下面给定的 css 子元素占据 25% 的宽度：

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

.label {
  align-content: left;
  /* display: flex; */
}
.buttonStyle {
  display: flex;
  align-self: stretch;
  min-width: 150px;
  width: 100%;
}

【讨论】：