Leave left and right side with height 100% independent of content size [duplicate]

Question

Leave left and right side with height 100% independent of content size [duplicate]

Navigation

#1 by (1 votes)
#2 by (0 votes)

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

html5 css front-end flexbox

asked by anonymous 28.08.2018 / 18:45

2 answers

1

It seems that the flex container mixed with scroll is giving you problems. See this my solution, with HTML slightly modified in both the items, which now join item and left / right in the same div, as in creating a more external div for the 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>

28.08.2018 / 21:22

Error loading XML in Laravel Hot deploy with Netbeans

score 0 · Accepted Answer

How I responded to link

But to solve the overflow problem it would be enough to create a "grandfather" element, like this:

.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 width in percentage based on the number of columns.

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

link