Leave left and right side with height 100% independent of the content size

Asked

Viewed 118 times

-2

.box {
   display: flex;
   height: 200px;
   max-height: 50%;
   margin: 10%;
   background-color: aqua;
   overflow: scroll;
}

.item {
   width: 50%;   
}

.esquerda {
   background-color: brown;
}

.direita {
   background-color: tomato;
}
<div class="box">
  <div class="item">
     <div class="esquerda">
           esquerda
     </div>
  </div>

  <div class="item">
        <div class="direita">
           direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
           direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>

        </div>
  </div>

</div>

css html5 front-end flexbox

  • Are you going to use colors to know if one div is the same height as the other? You could use a color in the right div and a color in the whole box, giving the impression that the two Divs are of the same height.

  • This is a basic example that I made for you to understand the problem. The original modal could not do this. It has another background color, margin, etc...

  • A suggestion with flex: https://answall.com/a/325574/3635 (as you added the tag)

  • Yes, the flex by default leaves everyone the same size. Only my problem happens when I have scroll on that parent div.

  • Using Javascript you can: document.querySelector(".esquerda").style.height = document.querySelector(".direita").offsetHeight+"px";, but already has a jQuery version in this answer

  • I would like to solve the problem in css itself, but as a native alteration if I can’t, I will use this solution anyway. It came out right, thank you :D

  • @Laianehermes just create a "grandfather" element and place the overflow on it, and on the parent element put the display:flex, example: https://answall.com/a/325653/3635

Show 2 more comments

2 answers

1

It seems that the flex container mixed with scroll is giving problems. Check out my solution, with HTML slightly modified in both items, which now join item and left/right in the same div, and in creating a more external div for scroll.

.box {
  display: flex;
  margin: 10px;
  background-color: aqua;
  padding: 10px;
}

.item {
  flex-grow: 1;
}

.esquerda {
  background-color: brown;
}

.direita {
  background-color: tomato;
}

.outerbox {
  max-height: 200px;
  overflow: auto;
  background: yellow;
}
<div class="outerbox">
  <div class="box">
    <div class="item esquerda">
      esquerda
    </div>

    <div class="item direita">
      direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br> direita
      <br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>

    </div>

  </div>
</div>

0


How did I respond in /a/325574/3635

But to solve the problem of overflow it would be enough to create an element "grandfather", thus:

.avo {
    overflow: auto;
    height: 400px; /*altura fixa*/
}

.pai {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.pai > .coluna-1, .pai > .coluna-2 {
    width: 50%;
}

.pai > .coluna-1 {
     background: #f00;
}

.pai > .coluna-2 {
     background: #fc0;
}
<div class="avo">
    <div class="pai">
        <div class="coluna-1">
           foo bar
        </div>
        <div class="coluna-2">
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
           foo baz<br> foo baz<br> foo baz<br> foo baz<br> foo baz<br>
        </div>
   </div>
</div>

The parent element is required, the properties are for older browsers such as old Androids and IE10/IE11:

display: -ms-flex;
display: -webkit-flex;

You can put as many columns as you want, just adjust the width in percentage based on the number of columns.

Of course this for browsers that support flex, so it depends on your project, you can check on caniuse browsers that make use of basic flex support:

Browser other questions tagged css html5 front-end flexbox

You are not signed in. Login or sign up in order to post.