时间戳

首页 > 解决方案 > 如何使输入的反应方式与弹性框中的父 div 相同？

html - 如何使输入的反应方式与弹性框中的父 div 相同？

问题描述

我正在尝试使用 flexbox 正确调整一些 div 的大小，以便稍后我要添加的输入和其他项目具有正确的大小，但无论我对 div 做什么，输入大小都不会t 改变。

我可以对输入做些什么来使它的大小也根据父 div 改变？

下面我发布了我目前拥有的代码，以及输入明显很小的相同代码。第二个显示具有正确大小的绿色区域和小输入，而在顶部的一个上，输入将父级拉伸并且都具有相同的大小......

我需要将第二个标记为绿色的尺寸保持不变，并且我希望输入与该尺寸相匹配......

.flex-o-1 {flex: 1 1 auto;}
.flex-o-2 {flex: 2 2 auto;}
.flex-o-3 {flex: 3 3 auto;}
.flex-o-4 {flex: 4 4 auto;}
.flex-o-5 {flex: 5 5 auto;}

.GenInfo {display: flex;}

.GenInfo>div {
  margin-left: 0.2em;
  margin-right: 0.2em;
  background-color: green;
  height: 2em;
}

.GenInfo>div>input {max-width: 100%;} /* Also tried without this, nothing changes */

.SmallInput {max-width: 1em !important;} /* !important just for testing */
<div class="GenInfo">

  <div class="flex-o-5">
    <input type="text" />
  </div>

  <div class="flex-o-1">
    <input type="text" />
  </div>

  <div class="flex-o-3">
    <input type="text" />
  </div>

  <div class="flex-o-2">
    <input type="text" />
  </div>

  <div class="flex-o-2">
    <input type="text" />
  </div>

  <div class="flex-o-4">
    <input type="text" />
  </div>

</div>
<br>
<div class="GenInfo">

  <div class="flex-o-5">
    <input type="text" class="SmallInput" />
  </div>

  <div class="flex-o-1">
    <input type="text" class="SmallInput" />
  </div>

  <div class="flex-o-3">
    <input type="text" class="SmallInput" />
  </div>

  <div class="flex-o-2">
    <input type="text" class="SmallInput" />
  </div>

  <div class="flex-o-2">
    <input type="text" class="SmallInput" />
  </div>

  <div class="flex-o-4">
    <input type="text" class="SmallInput" />
  </div>

</div>

标签： htmlcssinputflexbox

解决方案

应用一个小宽度然后使用min-width:100%

.flex-o-1 {flex: 1 1 auto;}
.flex-o-2 {flex: 2 2 auto;}
.flex-o-3 {flex: 3 3 auto;}
.flex-o-4 {flex: 4 4 auto;}
.flex-o-5 {flex: 5 5 auto;}

.GenInfo {display: flex; margin-bottom:5px}

.GenInfo>div {
  margin-left: 0.2em;
  margin-right: 0.2em;
  background-color: green;
  height: 2em;
}


.GenInfo>div>input {
  min-width: 100%;
  width: 1px;
  box-sizing: border-box;
}
<div class="GenInfo">

  <div class="flex-o-5">
    <input type="text" >
  </div>

  <div class="flex-o-1">
    <input type="text" >
  </div>

  <div class="flex-o-3">
    <input type="text" >
  </div>

  <div class="flex-o-2">
    <input type="text" >
  </div>

  <div class="flex-o-2">
    <input type="text" >
  </div>

  <div class="flex-o-4">
    <input type="text" >
  </div>

</div>
<div class="GenInfo">

  <div class="flex-o-5">
  </div>

  <div class="flex-o-1">
  </div>

  <div class="flex-o-3">
  </div>

  <div class="flex-o-2">
  </div>

  <div class="flex-o-2">
  </div>

  <div class="flex-o-4">
  </div>

</div>

推荐阅读