CSS div equal height based on the min height div

Question

I have this problem that i want to solve without fixing my height. I'm using Bootstrap 4 for the buttons.

My HTML is structured like this : 1 div which contains 2 divs (Left and Right), Left contains a short text, and Right contains 5 buttons (or more) in a flex display. Right displays the buttons in columns (because I want it), but it doesn't wrap the content, it increases the hight of both Left and Right to fit all the button in one columns.

What I want is to fix the global height at the height of Left, and Right should adapt to this height by putting my buttons in 2 columns. My only solution is to fix manually the height of the div, which is working but i'm sure there is a better way to do so.

Here is the simplified code HTML and CSS, and I also have the codepen (I commented my height if you want to see what I want at the end) : 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

Based on the description of how you want the layout to be done, I would assume the following:

• the height of #mybuttons is solely determined by the height of the textual content in the left column
• the content in the right column should not dictate height of its parent, and simply allow its content to wrap into subcolumns when necessary

If that is the desired layout, you can simply wrap all the contents in the right column in another <div> which is positioned absolutely to take up all the area allocated for the right column. This has the effect of taking all its content out of the flow, which means they no longer have any effect on the height of #mybuttons.

It will look something like this:

<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>

With that in mind, you can then move all the flexbox styling originally applied to .right-block to .right-block-content, and it should work:

.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

If you are using flex then you need height for flex-wrap to work. another way is column-width add column-width: 153px; to #mybuttons .right-block. Adjust the width according to your requirements. thanks.

Answer 3

Try using this css (added media queries):

.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;
    }
}

Just the height needs to be adjusted, and I guess it works just fine.