CSS - две гибкие колонки

Question

Я работаю над редизайном веб-страницы со структурой, похожей на эту

.container {
  display:flex;
  flex-wrap: wrap;
  width: 700px;
  background-color: grey;
  justify-content: space-between;
}

.container__txt {
  display: flex;
  width: 100%;
  background-color: green;
}

.container-block {
  display: flex;
  width: calc(50% - 9px);
  background-color: red;
 }

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
  <div class="container-block">I am a block div</div>
 </div>

Я пытаюсь добиться определенного поведения.Я бы хотел, чтобы блоки были на всю ширину, если и только если другого блока здесь нет.

Я не могу найти хорошее решение, потому что у контейнера есть другой дочерний элемент, который является текстом div.Я не могу ни коснуться структуры HTML, ни добавить JS;поэтому решение должно быть чисто CSS.

Если у кого-то есть идея, как этого добиться, я буду благодарен.

Надеюсь, я не упустил аспект проблемы.

Answer 1

.container {
  background-color: grey;
}

.container__txt {
   display: flex;
  background-color: green;
}

.container__div {
   display: flex;
  background-color: green;
}

.container-block {
  display: flex;
  flex:1;
  background-color: red;
 }

 <div class="container">
    <div class="container__txt">I am a text div</div>
    <div class="container__div">
      <div class="container-block">I am a block div</div>
      <div class="container-block">I am a block div</div>
    </div>
 </div>
 <br>
 <br>
  <div class="container">
    <div class="container__txt">I am a text div</div>
    <div class="container__div">
      <div class="container-block">I am a block div</div>
    </div>
 </div>

https://jsfiddle.net/Sampath_Madhuranga/t8h671eb/11/

Попробуйте этот код. Работает нормально.

Answer 2

Добавление flex: 1 к вашему .container-block должно решить вашу проблему:

.container {
  display:flex;
  flex-wrap: wrap;
  width: 700px;
  background-color: grey;
  justify-content: space-between;
}

.container__txt {
  display: flex;
  width: 100%;
  background-color: green;
}

.container-block {
  display: flex;
  flex: 1;
  background-color: red;
}

.container-block + .container-block {
  margin-left: 18px;
}

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
  <div class="container-block">I am a block div</div>
</div>

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
</div>

Подробнее о свойстве flex вы можете узнать здесь .