Как позиционировать объекты друг за другом так, чтобы они занимали всю область родительского контейнера?

Question

Подскажите, каким образом лучше всего спозиционировать контейнеры, чтобы в итоге они выглядели как на картинке ниже? (цветом помечены области, которые эти объекты должны занимать относительного родительского класса .block_head) При этом должен быть сохранён весь функционал, то есть при нажатии на зелёную область должно отобразиться выпадающее меню.

У меня получилось только частично добиться такого результата:

.block_head {
  max-width: 140px;
  max-height: 200px;
  border: 5px solid red;
  display: flex;
  flex-direction: row;
}

.click_area label{
  background: #7fee1d;
  cursor: pointer;
}


.click_area input[type="checkbox"][name^=ch_show] {
  display:none;
}

.block_head span  {
  background: blue; 
  color: yellow;
}


.click_area span+span,
.collapsible {
  display: none;
}
.click_area input[type="checkbox"]:checked ~ span {
  display: none;
}

.click_area input[type="checkbox"]:checked ~ .collapsible {
  display: table;
}

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="block_head">
    <span><input type="checkbox" name="ch1" class="chk-all"></span>

    <div class = "click_area"><input type="checkbox" id="checkbox_id" name=ch_show/>
    <label for="checkbox_id">Text</label>

    <table class="collapsible" id="collapsible1">
        <tr><td><input type=checkbox name=ch1>1</td></tr>
        <tr><td><input type=checkbox name=ch1>2</td></tr>
        <tr><td><input type=checkbox name=ch1>3</td></tr>
        <tr><td><input type=checkbox name=ch1>4</td></tr>
        <tr><td><input type=checkbox name=ch1>5</td></tr>
    </table>
    
    </div>
</div>  


<script>
$(document).on('change', 'input[type=checkbox]', function () {
  var $this = $(this), $chks = $(document.getElementsByName(this.name)), $all = $chks.filter(".chk-all");
  
  if ($this.hasClass('chk-all')) {
    $chks.prop('checked', $this.prop('checked'));
  } else switch ($chks.filter(":checked").length) {
    case +$all.prop('checked'):
      $all.prop('checked', false).prop('indeterminate', false);
      break;
    case $chks.length - !!$this.prop('checked'):
      $all.prop('checked', true).prop('indeterminate', false);
      break;
    default:
      $all.prop('indeterminate', true);
  }
});
</script>

Answer 1

.block_head {
    align-items: center
}

.click_area {
    flex: 1 0 auto; 
}

.click_area label {
    display: block
}

Answer 2

Примерно то, что Вы хотите сделать:

.block_head {
  max-width: 140px;
  max-height: 200px;
  border: 5px solid red;
  display: flex;
  flex-direction: row;
}

.click_area {
  width: 100%;
}

.block__item {
  display: flex;
  width: 100%;
  position: relative;
}

.collapsible {
  width: 100%;
  border-collapse: collapse;
}

.collapsible input[type="checkbox"] {
  margin-left: 3px;
}

.collapsible__item {
  margin-top: 4px;
  background: #c1c6ff;
}

.click_area label {
  background: #7fee1d;
  cursor: pointer;
  width: 100%;
}

.click_area input[type="checkbox"][name^=ch_show] {
  display: none;
}

.block_head span {
  background: blue;
  color: yellow;
}

.click_area span+span,
.collapsible {
  display: none;
}

.click_area input[type="checkbox"]:checked~span {
  display: none;
}

.click_area input[type="checkbox"]:checked~.collapsible {
  display: table;
}

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="block_head">
  <div class="click_area"><input type="checkbox" id="checkbox_id" name=ch_show/>
    <div class="block__item">
      <span><input type="checkbox" name="ch1" class="chk-all"></span>
      <label for="checkbox_id">Text</label>
    </div>

    <table class="collapsible" id="collapsible1">
      <tr>
        <td>
          <div class="collapsible__item">
            <input type=checkbox name=ch1>1
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="collapsible__item">
            <input type=checkbox name=ch1>2
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="collapsible__item">
            <input type=checkbox name=ch1>3
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="collapsible__item">
            <input type=checkbox name=ch1>4
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="collapsible__item">
            <input type=checkbox name=ch1>5
          </div>
        </td>
      </tr>
    </table>

  </div>
</div>


<script>
  $(document).on('change', 'input[type=checkbox]', function() {
    var $this = $(this),
      $chks = $(document.getElementsByName(this.name)),
      $all = $chks.filter(".chk-all");

    if ($this.hasClass('chk-all')) {
      $chks.prop('checked', $this.prop('checked'));
    } else switch ($chks.filter(":checked").length) {
      case +$all.prop('checked'):
        $all.prop('checked', false).prop('indeterminate', false);
        break;
      case $chks.length - !!$this.prop('checked'):
        $all.prop('checked', true).prop('indeterminate', false);
        break;
      default:
        $all.prop('indeterminate', true);
    }
  });
</script>

БЛОГ НА HUSL

Как позиционировать объекты друг за другом так, чтобы они занимали всю область родительского контейнера?

Ответы (2 шт):