CSS flex layout, fix element to end

Question

I am trying to make a layout in CSS using flex boxes and I am trying to fix an element to the end by putting a growing separator before it. The layout consists of several choices and a custom choice which gives further options. At the bottom, there are some navigation buttons. I highlighted the separator for confirming its width/height. The thing is, this is working horizontally but not vertically! any ideas?

Edit: It's not obvious in the run snippet here because the height changes, I wanted to fix the last row to the bottom of the page

.row-container {
    list-style: none;
    display: flex; 
    flex-flow: wrap;
    justify-content: space-between;
}

.col-container {
    display: flex; 
    flex-flow: column;
    list-style: none;   
    justify-content: space-between;
}

.scheme {
    height: 100px;;
    margin: 8px;
    padding: 4px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: gainsboro;
    font-size: 1.5em;
    text-align: center;
    flex-grow: 1;
    flex-basis: 15%;
}

.sep {
    flex-grow: 1;
    background-color: gold;
}

.selected {
    background-color: deepskyblue;
    box-shadow: 0 4px 4px 0 gray;
    color: white;
}

.elem {
    flex-grow: 1;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
}

.small-btn {
    flex-basis: 100px;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
    background-color: dimgray;
    color: white;
}

.btn {
    background-color: dimgray;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-container">
        <div class="row-container">
            <div class="scheme" id="first">
                Choice1
            </div>
            <div class="scheme" id="second">
                Choice2
            </div>
            <div class="scheme" id="third">
                Choice3
            </div>
            <div class="scheme" id="custom">
                Custom
            </div>
        </div>

        <div class="row-container" id="custom-opt">
            <button class="btn elem">Choose xyz</button>
            <button class="btn elem">Choose abc</button>
        </div>

        <div class="sep"></div>
  
        <div class="row-container">
            <btn class="small-btn">cancel</btn>
            <div class="sep"></div>
            <btn class="small-btn">prev</btn>
            <btn class="small-btn">next</btn>
        </div>
    </div>
 <script>
 var scheme = "";
 $("#custom-opt").hide();
 $(".scheme").click(function () {
  if (scheme!= "") {
   if (scheme==$(this).attr("id")) {return;}
   if (scheme=="custom") {$("#custom-opt").hide();}
   $("#"+scheme).removeClass("selected");
  }
  scheme = $(this).attr("id");
  $(this).addClass("selected");
  if (scheme == "custom") {
   $("#custom-opt").show();
  }
 });
 </script>
</body>
</html>

.col-container {height: 100vh} & .sep {align-self: flex-end} — VXp, May 08 '18 at 12:26

score 2 · Answer 1 · answered May 08 '18 at 12:20

Is that what you're trying to do? You need to expand the <body> to use the page's height, then to expand .col-container to use 100% of the height of the <body>.

body{
   height: 100vh; /* Add this */
}

.row-container {
    list-style: none;
    display: flex; 
    flex-flow: wrap;
    justify-content: space-between;
}

.col-container {
    height: 100%; /* And this */
    display: flex; 
    flex-flow: column;
    list-style: none;   
    justify-content: space-between;
}

.scheme {
    height: 100px;;
    margin: 8px;
    padding: 4px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: gainsboro;
    font-size: 1.5em;
    text-align: center;
    flex-grow: 1;
    flex-basis: 15%;
}

.sep {
    flex-grow: 1;
    background-color: gold;
}

.selected {
    background-color: deepskyblue;
    box-shadow: 0 4px 4px 0 gray;
    color: white;
}

.elem {
    flex-grow: 1;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
}

.small-btn {
    flex-basis: 100px;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
    background-color: dimgray;
    color: white;
}

.btn {
    background-color: dimgray;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-container">
        <div class="row-container">
            <div class="scheme" id="first">
                Choice1
            </div>
            <div class="scheme" id="second">
                Choice2
            </div>
            <div class="scheme" id="third">
                Choice3
            </div>
            <div class="scheme" id="custom">
                Custom
            </div>
        </div>

        <div class="row-container" id="custom-opt">
            <button class="btn elem">Choose xyz</button>
            <button class="btn elem">Choose abc</button>
        </div>

        <div class="sep"></div>
  
        <div class="row-container">
            <btn class="small-btn">cancel</btn>
            <div class="sep"></div>
            <btn class="small-btn">prev</btn>
            <btn class="small-btn">next</btn>
        </div>
    </div>
 <script>
 var scheme = "";
 $("#custom-opt").hide();
 $(".scheme").click(function () {
  if (scheme!= "") {
   if (scheme==$(this).attr("id")) {return;}
   if (scheme=="custom") {$("#custom-opt").hide();}
   $("#"+scheme).removeClass("selected");
  }
  scheme = $(this).attr("id");
  $(this).addClass("selected");
  if (scheme == "custom") {
   $("#custom-opt").show();
  }
 });
 </script>
</body>
</html>

score 0 · Answer 2 · answered May 08 '18 at 12:29

0

just add to .col-container: height:100vw;

answered May 08 '18 at 12:29

Yosef Tukachinsky

5,570
1
13
29

CSS flex layout, fix element to end

2 Answers2