• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

229
Views
Bootstrap Flex: evita que los elementos secundarios se estiren del contenedor

Estoy tratando de establecer un diseño donde todo se pueda ver sin desplazarse. Cualquier panel que necesite más espacio debe ser desplazable. En el siguiente ejemplo, en lugar de que main-left se estire, me gustaría que el contenido de main-left sea desplazable y no estire toda la fila.

 for (let i = 0; i < 20; i++) { $("#main-left").append("<div>" + i + "</div>"); }
 html, body { height: 100%; max-height: 100vh; } #main { background-color: cyan; min-height: 100vh; } #main-right { background-color: red; } #main-left { background-color: pink; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid d-flex flex-column" id="main"> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> <d class="navbar-brand">Header</d> </div> </div> </nav> <div class="row d-flex flex-grow-1 " id="main-row"> <div class="col-5 d-flex flex-column" id="main-left"> </div> <div class="col-2" id="main-center"> </div> <div class="col-5" id="main-right"> </div> </div> </div>

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Para que un elemento se desplace, debe:

  • Tener una altura explícita
  • Tener suficiente contenido para desbordar esa altura explícita
  • Tener overflow: auto o scroll declarado

La siguiente regla de CSS apuntará a todos los elementos secundarios directos de su #main-row y evitará que estiren su contenedor, lo que permitirá el desplazamiento:

 #main-row > * { max-height: 100%; overflow: auto; } 

 for (let i = 0; i < 30; i++) { $("#main-left").append("<div>" + i + "</div>"); }
 #main { background-color: cyan; max-height: 100vh; overflow: hidden; } #main-row>* { max-height: 100vh; overflow: auto; } #main-right { background-color: red; } #main-left { background-color: pink; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid d-flex flex-column" id="main"> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> <d class="navbar-brand">Header</d> </div> </div> </nav> <div class="row d-flex flex-grow-1 " id="main-row"> <div class="col-5 d-flex flex-column" id="main-left"> left </div> <div class="col-2" id="main-center"> center </div> <div class="col-5" id="main-right"> right </div> </div> </div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error