CSS div равна высоте на основе минимальной высоты div

Question

У меня есть проблема, которую я хочу решить, не фиксируя свой рост. Я использую Bootstrap 4 для кнопок.

Мой HTML имеет следующую структуру: 1 div, который содержит 2 div ( Left и Right ), Left содержит короткий текст и Справа содержит 5 кнопок (или больше) на гибком дисплее. Вправо отображает кнопки в столбцах (потому что я этого хочу), но не переносит содержимое, оно увеличивает высоту как Влево , так и Вправо до поместите все кнопки в один столбец.

Я хочу зафиксировать глобальную высоту на высоте влево , а вправо должен адаптироваться к этой высоте, поместив мои кнопки в 2 столбца. Мое единственное решение состоит в том, чтобы вручную зафиксировать высоту div, который работает, но я уверен, что есть лучший способ сделать это.

Вот упрощенный код HTML и CSS, и у меня также есть кодекс (я прокомментировал свой рост, если вы хотите увидеть то, что я хочу в конце): https://codepen.io/julianlecalvez/pen/dwEoax

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 	height: 150px; */
}

#mybuttons .right-block div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div>
      <a class="btn btn-primary" role="button">Bouton 1</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 2</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 3</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 4</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 5</a>
    </div>
  </div>
</div>

Answer 1

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

• высота #mybuttons определяется исключительно высотой текстового содержимого влевый столбец
• содержимое в правом столбце не должно определять высоту его родительского элемента, а просто позволяет его содержимому переходить в подколонки при необходимости

Если это требуемый макет, выможет просто обернуть все содержимое в правом столбце в другой <div>, который расположен абсолютно, чтобы занять всю область, выделенную для правого столбца.Это приводит к удалению всего содержимого из потока, что означает, что они больше не влияют на высоту #mybuttons.

. Это будет выглядеть примерно так:

<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <!-- Left block content here -->
  </div>
  <div class="inner-block right-block">
    <!-- The div below is to be absolutely positioned relative to its parent -->
    <div class="right-block-content">
      <!-- Right block content here -->
    </div>
  </div>
</div>

Имея это в виду, вы можете затем переместить все стили Flexbox, первоначально примененные к .right-block, к .right-block-content, и они должны работать:

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  position: relative;
}

#mybuttons .right-block-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#mybuttons .right-block-content div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div class="right-block-content">
      <div>
        <a class="btn btn-primary" role="button">Bouton 1</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 2</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 3</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 4</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 5</a>
      </div>
    </div>
  </div>
</div>

Answer 2

Попробуйте использовать этот CSS (добавлены медиа-запросы):

.gray-inner-block {
    margin-top: 40px;
    background-color: #f2f2f2;
    padding: 40px;
}  
#mybuttons {
    display: flex;
}
#mybuttons .inner-block {
    width: 50%;
}
#mybuttons .right-block {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 150px;
}
#mybuttons .right-block div {
    width: 150px;
    height: 40px;
    margin-bottom: 8px;
    flex-basis: 0;
}
.inner-block .maintitle {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.inner-block .subtitle {
    font-size: 20px;
}

@media only screen and (max-width:670px){
    #mybuttons .right-block {
        height: 1500px;
    }
    #mybuttons .right-block div {
        margin: 0 0 20px 50px;
    }
}

Просто нужно отрегулировать высоту, и я думаю, что она работает просто отлично.

Answer 3

Если вы используете flex, тогда вам нужна высота для работы flex-wrap. другим способом является добавление ширины столбца column-width: 153px; к #mybuttons .right-block. Отрегулируйте ширину в соответствии с вашими требованиями. Благодарю.