如何使所有 div 框高度相同

Question

I'm trying to make all the DIV boxes that are in LightPink and LightBlue to be the same height.

Currently the boxes have different height, also to keep a note that LightBlue boxes are scrollable vertically:

 .sample_3 { margin: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; } .sample_3 .column > div { padding: 5px 20px; border: 1px blue solid; } .sample_3 .box__second { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; width: 300px; } .sample_3 .box__first > .column > div { background-color: lightpink; } .sample_3 .box__second > .column > div { background-color: lightblue; width: 100%; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_3"> <div class="box__first"> <div class="column"> <div>Box 1 231232 sds sad s</div> <div>Box 2</div> <div>Box 3</div> </div> </div> <div class="box__second"> <div class="column second"> <div>Random Text</div> <div>Random Text MORE MORE MORE</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> </div> </div>

I have done this via Flex here but this is using different HTML structure which is not what ideal for me, but this could give a good idea what i'm trying to achieve with sample_3

 .sample_4 .wrap { width: 100%; margin: 15px; } .sample_4 .column { background-color: lightskyblue; border: 1px solid blue; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sample_4 .column div { padding: 5px; } .sample_4 .row > .column:not(:first-child) { background-color: #ffbb00; overflow-x: scroll; width: 400px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_4"> <div class="wrap"> <div class="row"> <div class="column"> <div>Box 1 MORE MORE</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random</div> </div> </div> <div class="row"> <div class="column"> <div>Box 2</div> </div> <div class="column"> <div>Random Text Text MORE MORE MORE</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> </div> </div> </div>

So end goal is to have sample_3 all boxes to be same height and they can change the height dynamically depending on the content of other box in same row.

Answer 1

Should try this way

             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

             <style type="text/css">
               .table-responsive{
               max-width: 200px;
             }
             </style>
             <table class="table table-hover">

             <tbody>
              <tr>
                   <th scope="row">Box 1</th>
                   <td class="table-responsive">Random Text </td>
                   <td>Random Text</td>
                   <td>Random Text</td>
  
              </tr>
              <tr>
              <th scope="row">Box 2</th>
              <td class="table-responsive">RAndom Text RAndom Text RAndom Text RAndom TextRAndom TextRAndom text RAndom Textv RAndom Text RAndom Text RAndom Text RAndom Textvv RAndom Text</td>
               <td >RAndom Text</td>
               <td>RAndom Text</td>
             </tr>
             <tr>
              <th scope="row">Box 3</th>
              <td  >Random Text</td>
              <td class="table-responsive">Random Text Random TextRandom Textvv Random Textvv Random Text vvRandom TextRandom TextRandom TextRandom Text</td>
                    <td>A</td>
                  </tr>
                </tbody>
              </table>

This might be helpful

Answer 2

This is the closest solution i could figure out, key point on this one is to use sticky because with fixed boxed are not even.

The problem with sticky is that when scrolling in mobile view only sticky element moves slightly: video example > https://streamable.com/jhz2vr

 .sample__two { overflow-x: scroll; border-left: 1px solid red; } .sample__two th { min-width: 120px; } .sample__two th, .sample__two td { padding: 5px 10px; width: 100px; border: 1px solid red; border-collapse: collapse; } .sample__two .freeze { position: -webkit-sticky; position: sticky; left: 0; background-color: white; border-left: 0px solid red; } .sample__two .hide { border: unset; } .sample__two thead { background-color: #93eccf; } .sample__two tbody { background-color: #aedb31; } .sample__two .test { background-color: #0026ff !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample__two"> <table> <thead> <tr> <th class="freeze">Empty</th> <th class="">Empty</th> <th>Ratings</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> </tr> </thead> <tbody> <tr> <td class="freeze">Price 1</td> <td>Content 1</td> <td>Content 1 TEST</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> </tr> <tr> <td class="freeze">Price 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> </tr> </tbody> </table> </div>

I would not mind if someone has better way

Answer 3

 .sample_3 { margin: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; } .sample_3 .column { display: flex; height: 200px; } .sample_3 .box__first .column { flex-direction: column; } .sample_3 .box__first .column div { height: 200px; } .sample_3 .column > div { padding: 5px 20px; border: 1px blue solid; } .sample_3 .box__second { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; width: 300px; } .sample_3 .box__first > .column > div { background-color: lightpink; } .sample_3 .box__second > .column > div { background-color: lightblue; width: 100%; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_3"> <div class="box__first"> <div class="column"> <div>Box 1 231232 sds sad s</div> <div>Box 2</div> <div>Box 3</div> </div> </div> <div class="box__second"> <div class="column second"> <div>Random Text</div> <div>Random Text MORE MORE MORE</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> </div> </div>

Answer 4

 .sample__two { overflow-x: scroll; border-left: 1px solid red; } .sample__two th { min-width: 120px; } .sample__two th, .sample__two td { padding: 5px 10px; width: 100px; border: 1px solid red; border-collapse: collapse; } .sample__two .freeze { position: -webkit-sticky; position: sticky; left: 0; background-color: white; border-left: 0px solid red; } .sample__two .hide { border: unset; } .sample__two thead { background-color: #93eccf; } .sample__two tbody { background-color: #aedb31; } .sample__two .test { background-color: #0026ff !important; } .sample__two td{ height: 100px;}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample__two"> <table> <thead> <tr> <th class="freeze">Empty</th> <th class="">Empty</th> <th>Ratings</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> </tr> </thead> <tbody> <tr> <td class="freeze">Price 1</td> <td>Content 1</td> <td>Content 1 TEST</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> </tr> <tr> <td class="freeze">Price 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> </tr> </tbody> </table> </div>