Как заставить вход реагировать так же, как родительский div во flexbox? - PullRequest
0 голосов
/ 26 августа 2018

Я пытаюсь правильно измерить некоторые div с помощью flexbox, чтобы входы и другие элементы, которые я собираюсь добавить позже, имели правильные размеры, но независимо от того, что я делаю с div, вводразмер не меняется.

Что я могу сделать для ввода, чтобы он также изменился в соответствии с родительским 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>

1 Ответ

0 голосов
/ 26 августа 2018

Примените небольшую ширину, затем используйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...