Как использовать CSS-стилизацию, чтобы доступная ширина использовалась в одном столбце, а в другом столбце использовалась нужная ширина

Question

Мне нужно CSS стиль для 2 столбцов.Первый столбец должен использовать полную ширину, а второй столбец рядом с ним должен использовать только необходимую ему ширину.Как я могу это сделать?Есть ли способ сделать это с помощью display: flex?

Пример:

"-" = пробел

, если отображается второй столбец: нетпервый столбец должен использовать ширину 100%

[First-Column-------------------------------------------------------]

, а если нет

[First-Column------------------------------------------------][HELLO]

[First-Column-------------------------------------------][HELLOHELLO]

Answer 1

Вы можете сделать это с flexbox.Просто используйте flex: 1 для первого ребенка и flex: 0 для второго.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
}

.child1 {
  flex: 1;
  background: red;
}

.child2 {
  flex: 0;
  background: blue;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

Если скрыть второго потомка, результат будет выглядеть следующим образом:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
}

.child1 {
  flex: 1;
  background: red;
}

.child2 {
  flex: 0;
  background: blue;
  display: none;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

---

Если вы хотите элементы с только шириной содержимого, вы можете использовать это:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
  justify-content: space-between;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

Answer 2

Вы можете сделать это с кодом ниже:

.mainDiv, .mainDiv div{
  display: block;
}
.mainDiv .firstDiv{
  float: left;
  width: 200px;
}
.mainDiv .secondDiv{
  float: left;
  width: calc(100% - 200px);
}

<div class="mainDiv">
  <div class="firstDiv"> First Div </div>
  <div class="secondDiv"> Second Div </div>
</div>

Answer 3

.main{
  display:flex;
}

<div class="main">
  <div>[First-Column------------------------------------------------]</div>
  <div> [HELLO]</div>
</div>