相关疑难解决方法(0)

我正在尝试创建一个flexbox布局,它做了一些我认为会更容易的事情,但是我找不到正确的方法.

我希望有一排具有动态高度的项目,允许一个孩子根据需要增长,但限制其他项目的高度,以便切断内容.

我想使用flexbox,因此与此相关的浏览器问题不是问题,但我想避免在解决方案中使用JavaScript.

有任何想法吗？这可能是一个微不足道的问题,但我无法使用我一直在使用的搜索词找到任何内容.谢谢!

这是一个CodePen演示,以防您想要修改它以便在您的答案中使用.

这是我的参考flexbox布局:

.row {
    display: flex;
}

.info {
    flex: 0 0 200px;
}

.description {
    flex: 1 1 auto;
}

<div class="row">
    <div class="info">This should grow dynamically</div>
    <div class="description">This should be limited in height by the .info div</div>
</div>

我目前有一个 flexbox 布局，如下所示：

蓝色是 class="wrap"，橙色和所有三个黄色框包含在两个单独的 class="wrap_col" 中，每个黄色框都包含在 class="wrap_item" 中。

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

如何缩小三个黄色框的高度，使其与橙色框的高度相同？你能将 flexbox 缩小到与最短盒子相同的高度吗？

主语

我有两个 div（左和右）。我想让左边的 div 像主要的一样，并强制右边的 div 与左边的高度相同，即使它会有更多的内容（并且这样做overflow: hidden）。如果有一种方法可以使用css和html不使用它，我将不胜感激js。

这是一个小片段，我的标记看起来如何：

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
}

<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content<p>
    <p>a lot of content</p>
  </div>
</div>

我有一个外部div包含三个内部div.

我希望最左边的内部div始终确定外部div的高度.如果其他内部div的内容[比最左边的div]少,则它们将具有空白空间.如果他们有更多的内容[比最左边的div],他们会得到一个滚动条.

关于SO的一些其他问题询问将外部div的高度设置为内部div 的高度.但是,在我的情况下,我有多个内部div,我不知道外部div的高度是多少还是小于最左边div的高度.

有没有办法做到这一点,特别是只使用CSS？

Codepen:https://codepen.io/pprunesquallor/pen/qKxvrX

我是初学者,玩网格和flexbox.

我想文章元素(黄色)的高度只有就像只要文本需要(所以在这种情况下,CCA一半长),因此aside元素(灰色)应根据相同的高度文章的高度,可滚动.

先感谢您!!

html, body {
    height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  align-items: stretch;
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  background-color: lime;
}

header > h1 {
  margin: 0;
  background-color: brown;
}

nav {
    display: flex;
    flex-direction: row;
    background-color: orange;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  background-color: red;
}

article {
  background-color: yellow;
}

aside {
  width: 50%;
  overflow: auto;
  overflow-y: scroll;
  background-color: grey; …

我想使用 CSS 网格在两列中显示两个区域。但是，左列的高度必须与右列的高度相同。

如果左列高于右列，则左列中的内容应该是可滚动的。

我想要实现的目标：

如果没有以像素为单位的硬编码高度，我就无法做到这一点。仅通过 CSS 可以做到这一点吗？或者我需要使用 JavaScript 重新计算左列高度？

我附上jsFiddle来看看。

https://jsfiddle.net/rafalcypcer/2teonuhy/17/

谢谢，

拉法尔

.gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  overflow-y: auto;
  margin: 20px;
  height: 100%;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}

<div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div> …

我有这个简单的例子：

.container {
  display: flex;
  background-color: #ddd;
  align-items: stretch;
}

.logo {}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://via.placeholder.com/103x121.png/ff0" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

我需要图像获得与右侧同级 div 相同的高度，而不是 vv，即将图像缩小到实际文本高度并保持宽高比。

一旦我使用Angular Material（以及因此使用flexbox）设置了UI，如下所示：

这两个div在父容器中。我真正喜欢的布局是，容器的高度由第一个div决定（隐式地通过最大宽度和缩放），第二个div尊重该高度并为任何溢出创建滚动。

我正在用VueJS和Vuetify重写应用程序，但是我无法翻译旧版式。我尝试对原始CSS进行逆向工程，但是Angular Material创建的结构使这一工作变得困难。

这是我最近来的，但是滚动区域仍然在容器外部溢出：

    <v-container fluid>
        <v-layout v-bind="layout">
            <v-flex md8 sm12 id="mapContainer">
                <map-phase-viewer :game="game" :phases="phases"></map-phase-viewer>
            </v-flex>
            <v-flex fluid id="gameToolsContainer" class="elevation-1">
                <div style="overflow-y: scroll;">
                    <v-list subheader v-if="game.Started" dense>
                        <div v-for="power in variant.Nations" :key="power + 'UnitSection'">
                    <v-subheader class="nationSubheader">{{power}}</v-subheader>
                    <province-list-item
                        v-for="unit in getCurrentPhase().Units"
                        v-if="unit.Unit.Nation === power"
                        :key="unit.Province"
                        :unit="unit">
                    </province-list-item>
                </div>
                    </v-list>
                </div>
            </v-flex>
        </v-layout>
    </v-container>

使用Vuetify甚至原始CSS，实现此布局所需的最低结构是什么？为简单起见，请忽略您在原始文档中看到的选项卡。

I am trying to make two sibling div elements the same height. The of them has an overflow-y and a scrollbar with variable height content. The main div has content that is also variable height depending on dynamic content and browser width. The main content div should show all its content. The left scrolling panel should be equal height to the main content and no matter the browser width or height of content, hence the scrolling bar.

Previously, I would …

我有一个<img>右边的面板,其中包含一个控件标题和一长串项目.所以我有一个嵌套的flexbox情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

在一个非常基本的层面上,两个并排面板很容易,是一个简单的flex align-items: stretch... https://codepen.io/neekfenwick/pen/MOxYxz

在这个基本级别上,如何保持两个并排相同高度的div是一个重复的问题？.

一旦右侧的面板与垂直滚动列表变得更加复杂,我无法看到如何使其父级的高度,第二个.child与第一个的高度相匹配.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已经阅读了具有可滚动内容的Flexbox项目,但这解决了水平滚动问题,而不是像这样的垂直布局.另外,带滚动区域的嵌套弹性框处理垂直堆叠的嵌套弹性框,我认为这种组合row和column方向混淆了我的情况.

作为代码段:

.container …

只用CSS可以实现吗？有两个兄弟元素。第二个元素的高度仅足以容纳其子元素（子元素可能会随着时间的推移而改变）。第一个元素应与第二个元素具有相同的高度。如果它的内容大于它的高度，那么它应该通过滚动溢出。

下面的代码片段与此不匹配，因为第一个元素占据了完全显示其内容所需的高度。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

#first {
  background-color: #00F;
  overflow-y: scroll;
  height: 100%;
}

#second {
  background-color: #0F0;
  height: fit-content;
  width: 200px;
}

#block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div id="first">
    <div id="block">
    </div>
    <div id="block">
    </div>
    <div id="block">
    </div>
  </div>
  <div id="second">
    <div id="block">
    </div>
    <div id="block">
    </div> …