Limit height of a HTML element within a 'flex-direction: column' container

Question

I don't succeed in limiting the height of a HTML element inserted inside a 'flex-direction: column' container. I would like to have a window with:

on the top, the title of my page
on the left, some commands
on the right, a list on which I can interfer

The .list box should be limited in height (the height of its ancestor), and I should be able to scroll (probable with some kind of overflow: auto).

The problem, as I saw in the inspector, is that the element .tabcontent is not limited in height. It overflows its parent (.namespace). The thing is, I think, that I don't succeed in limiting the size of flex children when they are in the main direction.

//* Artificial filling.
const list = document.querySelector('.list');
for (i = 0; i < 100; i++) {
  list.appendChild(Object.assign(document.createElement('p'), {
    innerHTML: i,
  }));
}

html {
  height: 100%;
  display: flex;
}

body {
  overflow: hidden;
  flex-grow: 1;
  display: flex;
}

.tabsholder {
  flex-grow: 1;
  display: flex;
}

.namespace {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.titlesline {
  font-size: 50px;
}

.tabcontent {
  flex-shrink: 1;
}

.needs {
  display: flex;
  gap: 10px;
}

.controls {
  display: flex;
  flex-direction: column;
}

.list {
  overflow: auto;
}

<body>
  <div class='tabsholder'>
    <div class='namespace'>
      <div class='titlesline'>titles line</div>
      <div class='tabcontent'>
        <div class='needs'>
          <div class='controls'>
            <button>ajouter</button>
            <button>supprimer</button>
            <button>déplacer</button>
            <button>sauvegarder</button>
            <button>charger</button>
          </div>
          <div class='list'></div>
        </div>
      </div>
    </div>
  </div>
</body>

Welcome. "Interfer" isn't a word in English, and "interfere" doesn't seem like an appropriate correction. What did you mean by that? — isherwood, May 11 '22 at 16:32
`html { height: 100%; display: flex; }` is a useless declaration. html height will always be calculated to fit content. Also `100%` means 100% of the parent. html has no parent... also applying flexbox to html is useless as it only has 1 child element that is visible: body. — tacoshy, May 11 '22 at 16:37
@isherwodd For "interfere", actually, I just wanted to say that I could manipulate the list with the commands that are on the left. — Myriam Lagarde, May 12 '22 at 07:28
@tacoshy I developped this question in [another thread](https://stackoverflow.com/questions/72211867/fix-the-size-of-html-and-body-elements-to-be-exactly-those-of-the-screen). — Myriam Lagarde, May 12 '22 at 07:53

score 0 · Answer 1 · answered May 11 '22 at 17:18

max-height property can limit the height of any HTML element.

//* Artificial filling.
const list = document.querySelector('.list');
for (i = 0; i < 100; i++) {
  list.appendChild(Object.assign(document.createElement('p'), {
    innerHTML: i,
  }));
}

.namespace,
.controls {
  display: flex;
  flex-direction: column;
}

.needs {
  display: flex;
  gap: 10px;
}

.list {
  max-height: 200px;
  overflow: auto;
}

<body>
  <div class='tabsholder'>
    <div class='namespace'>
      <div class='titlesline'>titles line</div>
      <div class='tabcontent'>
        <div class='needs'>
          <div class='controls'>
            <button>ajouter</button>
            <button>supprimer</button>
            <button>déplacer</button>
            <button>sauvegarder</button>
            <button>charger</button>
          </div>
          <div class='list'></div>
        </div>
      </div>
    </div>
  </div>
</body>

is this answer your question ?

Actually, this doesn't answer my question. I want the list to be as big as possible, and fill its parent. With `max-height: 200px`, I limit the height to `200px`. — Myriam Lagarde, May 12 '22 at 07:59

Limit height of a HTML element within a 'flex-direction: column' container

1 Answers1