/ / Die Höhe einer Flexbox-Zeile wird durch eines der untergeordneten Elemente festgelegt - html, css, css3, flexbox

Die Höhe einer Flexbox-Zeile wird durch eines ihrer untergeordneten Elemente bestimmt - html, css, css3, flexbox

Ich mache einen kleinen Chat / Stream Abschnitt für eineSeite? ˅. Das Video hat Stile, um immer ein Seitenverhältnis von 16: 9 zu behalten. Der Chat daneben Ich möchte die gleiche Höhe wie das Video haben. Die Chat-Box hat Überlaufeigenschaften, so dass der übergeordnete Container gedehnt wird, wenn der Chat eine bestimmte Höhe überschreitet, um alle Chat-Elemente im div anzuzeigen. was zu erwarten ist. Was ich wirklich frage, ist, wie ich die Höhe einer Flexbox-Säule nur so weit wie die erste machen würde.

JSFIDDLE

https://jsfiddle.net/4bdrwh1f/14/

-Was ich möchte-

(Denken Sie daran, dass ich keine festgelegte Höhe haben kann, denn wenn sich die Größe des Bildschirms ändert, ändert sich die Höhe des Videos, um das Seitenverhältnis beizubehalten.)

Bildbeschreibung hier eingeben

-Was ich bekomme-

(Wenn ich Höhe verwende: 100%)

Bildbeschreibung hier eingeben

Also kein Überlauf: /

HTML (Die wichtigen Bits)

  <div className="stream-page-top">
<div className="stream-page-main">

<div className="stream-wrapper">
<Video>
<source src={testVid} type="video/mp4"/>
</Video>
</div>

</div>

<div className="stream-page-aside">
<div className="stream-page-chat-wrapper">
<div className="chat-items">
/* This is where chat items are rendered */
</div>
</div>
</div>
</div>

CSS

.stream-page-top {
@include flexbox();

.stream-page-main {
@include flex(5);
}

.stream-page-aside {
@include flex(2);
}

.stream-page-chat-wrapper {
@include flexbox();
@include flex-direction(column);
background-color: #021117;
width: 96%;
height: 100%;
margin: 0 auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;

.chat-items {
@include flexbox();
@include flex-direction(column-reverse);
overflow: auto;
height: 100%;
}
}
}

Antworten:

0 für die Antwort № 1

Ich kann wirklich nicht mit Ihrem Code arbeiten, aber wenn Sie zwei Elemente hinzufügen, ist die gleiche Höhe möglich display: flex zum übergeordneten Element. Wenn das nicht funktioniert, überprüfen Sie, ob alle relevanten Elemente vorhanden sind 100% height

Vielleicht können Sie den Link für uns teilen.