CODEWITHSUNDEEP
htmlcssflexbox
Coop4Free
Coop4Free

Reputation: 27

Items must not affect the height of the flexbox

Currently I am building an own website and I need a special functionality to be implemented.

The code above defines three rows: Row 1: A grid row whose height is as high as required. Row 2: A flex-row whose height is filling the remaining space between row 1 and row 3. Row 3: A flex-row whose height is filling 35% of the websites height and it is margined to bottom.

Over time the buttons from css-class buttonList-button which are located in row 2 gets more as a js-script creates them. I want that if there are to much buttons to display all, the user should be able to scroll through the both button list separately. It must not happen that row 3 is shifted downwards or that the websites height becomes over 100%. Row 2 should keep the same height.

In the code above I already added 'overflow-y: scroll;' attribute to buttonList class but instead row 3 gets shifted downwards so that the websites height becomes over 100%. If I add the 'overflow-y: scroll;' attribute to flex-row-1 class I only can controll both lists together but I want them to scroll separately.

So I tried to set max-hight attribute to flex-row-1 or buttonList class but it doesn't work. I tried to inherit flex-row-1s height to the buttonList but nothing works. Do you guys have an idea?

/* test.css */

.blue
{
    background-color: blue;
}

.red
{
    background-color: red;
}

.yellow
{
    background-color: yellow;
}

html, body
{
    height: 100%;
}

.row
{
    margin-left:0;
    margin-right:0;
}

.flex-body
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-row-1
{
    display: flex;
    flex: 1;
}

.flex-row-2
{
    display: flex;
    min-height: 35%;
    margin-bottom: auto;
}

.buttonList
{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.buttonList-button
{
    display: inline-block;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
    min-height: 100px;
}
<!doctype html>
<html>
  <head>
    <!-- test.html -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    <link rel="stylesheet" href="test.css">
  </head>
  <body class="flex-body">
    <div class="row blue">
      <p>.</p>
    </div>
    <div class="flex-row-1 red">
      <div class="col-6">
        <div class="buttonList">
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
        </div>
      </div>
      <div class="col-6">
        <div class="buttonList">
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
        </div>
      </div>
    </div>
    <div class="flex-row-2 yellow"></div>
  </body>
</html>

Upvotes: 0

Views: 54

Answers (1)

Coop4Free
Coop4Free

Reputation: 27

After further tries I've done it:

<!doctype html>
<html>
  <head>
    <!-- test.html -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="test.css">
  </head>
  <body class="flex-body">
    <div class="row blue">
      <p>.</p>
    </div>
    <div class="flex-row-1 red">
      <div class="col-6 flex-col">
        <div class="buttonList">
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
        </div>
      </div>
      <div class="col-6 flex-col">
        <div class="buttonList">
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
          <button type="button" class="btn btn-secondary buttonList-button">Primary</button>
        </div>
      </div>
    </div>
    <div class="flex-row-2 yellow"></div>
  </body>
</html>

/* test.css */

.blue
{
    background-color: blue;
}

.red
{
    background-color: red;
}

.yellow
{
    background-color: yellow;
}

html, body
{
    height: 100%;
}

.row
{
    margin-left:0;
    margin-right:0;
}

.flex-body
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-row-1
{
    display: flex;
    flex: 1;
    height: 0px;
}

.flex-row-2
{
    display: flex;
    min-height: 35%;
    margin-bottom: auto;
}

.flex-col
{
    height: 100%;
}

.buttonList
{
    display: flex;
    flex-direction: column;
    height: inherit;
    overflow-y: scroll;
}

.buttonList-button
{
    display: inline-block;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
    min-height: 100px;
}

Upvotes: 1

Related Questions