How to Make a Flex Item Not Fill The Height of The Flex Container

How to make a flex item not fill the height of the flex container?

The align-items, or respectively align-content attribute controls this behaviour.

align-items defines the items' positioning perpendicularly to flex-direction.

The default flex-direction is row, therfore vertical placement can be controlled with align-items.

There is also the align-self attribute to control the alignment on a per item basis.

#a {  display:flex;
  align-items:flex-start;  align-content:flex-start;  }
#a > div {    background-color:red;  padding:5px;  margin:2px;  } #a > #c {  align-self:stretch; }

<div id="a">    <div id="b">left</div>  <div id="c">middle</div>  <div>right<br>right<br>right<br>right<br>right<br></div>  </div>

Flex items not filling the height of its parent

Make sure the grid layout container has height of 100vh and the container you've shown also has height of 100%.
To center the text inside of each item, you can make each of them display: flex.

.grid-container {
    height: 100vh;
}

#container {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

Flex element not filling up 100% height in flex container

Remove height: 100% from .col1, like:

.col1 {
    background: red;
    width: 50px;
}

Have a look at the snippet below:

.container {    display: flex;    width: 500px;}.col1 {    background: red;    width: 50px;}.col2 {    background: blue;    flex: 1;    height: 200px;}body {    margin: 0;}

<div class="container">    <div class="col1"></div>    <div class="col2"></div></div>

How can I make Flexbox children 100% height of their parent?

Use `align-items: stretch`

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

html/css flex: How to prevent item in container exceed parent container height?

To solve this with flexbox you need to wrap the box you want to scroll and add overflow-x: hidden; to the wrapping container. To fix some extra space use the calc() method. This happens, when is used height: 100vh; on a scrollable element.

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --header-height: 60px;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}

header {
  min-height: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
}

.box1,
.box2 {
  display: flex;
  flex: 1 0 50%;
  border: 1px solid red;
}

.box2 {
  height: calc(100vh - var(--header-height));
  background-color: antiquewhite;
  overflow-x: hidden;
}

.scrollable {
  width: 100%;
  display: flex;
  overflow-y: auto;
}

<div class="container">
  <header>Hello Flex!</header>

  <main>
    <div class="box1">1</div>
    <div class="box2">
      <div class="scrollable">
        2<br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> 2
        <br />2<br />2<br /> very long content, should be scrollable and NOT stretch parent.
      </div>
    </div>
  </main>
</div>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

CSS Flex items not filling container

Try this code.
I just added width: 100% and height: 100%, and set height 20% to .screen class element relative to .calculator class element. and, added box-sizing: border-box as universal style.

* {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #d2a5a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  background-color: #d2a5a5;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.calculator {
  background-color: #fff;
  border: 6px solid rgb(1, 1, 1);
  border-radius: 10px;
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 5px;
}

.display {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.display input {
  background-color: #fff;
  border: none;
  width: 100%;
  height: auto;
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.calculator .content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
}

.content .screen {
  height: 20%;
}

.content .screen input {
  height: 100%;
  text-align: right;
  padding: 0 2em;
}

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

.calculator .row .button {
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: rgb(1, 1, 1);
}

.calculator .row .button.zero {
  flex: 2;
}

.calculator .row .button:hover {
  background-color: #ccc;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="calculator">
    <div class="content">
      <div class="screen">
        <input type="text" class="display" value="0" disabled />
      </div>
      <div class="row">
        <button class="button" onclick="calculator.addDigit(7)">
                        7
                    </button>
        <button class="button" onclick="calculator.addDigit(8)">
                        8
                    </button>
        <button class="button" onclick="calculator.addDigit(9)">
                        9
                    </button>
        <button class="button" onclick="calculator.addOperator('/')">
                        /
                    </button>
      </div>
      <div class="row">
        <button class="button" onclick="calculator.addDigit(7)">
                        7
                    </button>
        <button class="button" onclick="calculator.addDigit(8)">
                        8
                    </button>
        <button class="button" onclick="calculator.addDigit(9)">
                        9
                    </button>
        <button class="button" onclick="calculator.addOperator('*')">
                        *
                    </button>
      </div>
      <div class="row">
        <button class="button" onclick="calculator.addDigit(4)">
                        4
                    </button>
        <button class="button" onclick="calculator.addDigit(5)">
                        5
                    </button>
        <button class="button" onclick="calculator.addDigit(6)">
                        6
                    </button>
        <button class="button" onclick="calculator.addOperator('-')">
                        -
                    </button>
      </div>
      <div class="row">
        <button class="button" onclick="calculator.addDigit(1)">
                        1
                    </button>
        <button class="button" onclick="calculator.addDigit(2)">
                        2
                    </button>
        <button class="button" onclick="calculator.addDigit(3)">
                        3
                    </button>
        <button class="button" onclick="calculator.addOperator('+')">
                        +
                    </button>
      </div>
      <div class="row">
        <button class="button zero" onclick="calculator.addDigit(0)">
                        0
                    </button>
        <button class="button" onclick="calculator.addDecimal()">
                        .
                    </button>
        <button class="button" onclick="calculator.addOperator('=')">
                        =
                    </button>
      </div>
    </div>
  </div>
</body>

</html>

Make inner div fill remaining height using flex

I edited @Sfili_81's answer and added these to the *

margin: 0;
padding: 0;

Here's the entire code

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-content {
  display: flex;
  border: 1px solid black;
  height: 100vh;
  flex-flow: column;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

#listItems {
  border: 3px solid green;
  flex: 1 1 100%;
}

<div class="home-section">
  <div class="home-content">
    <div class="container">
      <form>
        <label for="example">Input</label>
        <input type="text" name="example">
      </form>
      <div id="listItems">

      </div>
    </div>
  </div>
</div>

How to Make a Flex Item Not Fill The Height of The Flex Container