限制A＆＃x27; flex方向内的HTML元素的高度：列＆＃x27;容器

发布于 2025-01-28 02:39:20 字数 1874 浏览 2 评论 0原文

我无法成功限制插入“ flex方向：列”容器中的HTML元素的高度。我想拥有一个窗口：

在顶部，我的页面标题
在左侧，
右侧的一些命令，我可以在其上干预

list box的列表中应受到限制高度（其祖先的高度），我应该能够滚动（可能具有某种溢出：auto）。

正如我在检查员中看到的那样，问题在于元素.tabcontent不限于高度。它溢出其父（.namespace）。我认为，事实是，当我朝着主要方向时，我不会成功地限制弹性孩子的大小。

//* 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆追雨的时光 2025-02-04 02:39:20

Max-Height属性可以限制任何HTML元素的高度。

//* 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>

这是您的问题吗？

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 ?

回复收藏 0 原文

~没有更多了~