Question

我有一个带有标准div的简单flex容器。问题在于它从不显示溢出的滚动条。我希望它垂直滚动。我只是输入更多单词，所以我可以提交这个问题。

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
 @override
Widget build(BuildContext context) {
return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new Page1(title: 'Flutter Demo Home Page'),
);
}
}
class Page1 extends StatefulWidget {
Page1({Key key, this.title}) : super(key: key);
final String title;

@override
Page1State createState() => new Page1State();
}
class Page1State extends State<Page1> {
StreamController<int> streamController = new StreamController<int>();
@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
    child: new RaisedButton(child: new Text("This is Page 1, Press here to go to page 2"),onPressed:()=>streamController.add(2) ,),
  ),
);
}
@override
void initState() {
streamController.stream.listen((intValue){
  print("Page 1 stream : "+intValue.toString());
  if(intValue==2){
    Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>Page2(title: "Page 2",)));
  }
});
super.initState();
}
@override
void dispose() {
streamController.close();
super.dispose();
}
}
class Page2 extends StatefulWidget {
Page2({Key key, this.title}) : super(key: key);
final String title;
@override
Page2State createState() => new Page2State();
}
class Page2State extends State<Page2> {
StreamController<int> streamController = new StreamController<int>();
@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
    child: new RaisedButton(child: new Text("This is Page 2, Press here to go to page 2"),onPressed:()=> streamController.add(1),),
  ),
 );
 }
 @override
 void initState() {
 streamController.stream.listen((intValue){
  print("Page 2 stream : "+intValue.toString());
  if(intValue==1){
    Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>Page1(title: "Page 1",)));
  }
  });
  super.initState();
  }


  @override
  void dispose() {
   streamController.close();
  super.dispose();
  }
  }

#chatBody {
  height: 170px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

Answer 1

要避免 (not cure)，使滚动错误在column-reverse无效的情况下，您应该使用额外的flex （或不使用）将其包裹的容器。

使用column-reverse后，最后一个元素将首先显示在顶部，并且滚动条将在父包装器上需要的地方工作。

要最终在视觉上在底部找到最后一个元素，您可以通过scale()镜像整个容器，并再次镜像每个子容器，以便再次读取。

注意：：滚动将反向，向下滚动轮将在屏幕上向上滚动...已镜像。

下面的演示

#chatBody {
  height: auto;/* reset */
  width: auto;/* reset */
  flex: 1;
  display: flex;
  flex-flow: column-reverse;/* reset preparing instead justify-content flex-end */
  transform: scale(1, 1);/* reset, children 1 after 1 will be set back to readable */
  counter-reset:div;/* demo purpose */
}
.chat-msg:before {
counter-increment:div;
content:counter(div)' - ';
float:left;color:red;
}
div[id] {
  overflow: auto;
  border: solid;
  height: 170px;
  flex-flow: column;
}

div[id],
.chat-msg {
  transform: scale(1, -1);/* visual mirroring */
}

.chat-msg {
  border-top: solid;
}

<div id>
  <div id="chatBody">
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user">last</div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
  </div>
</div>

如果您不想镜像容器，请使用此answer uses a javascript，因此滚动已经一直到底部，并且不需要使用flex模型。

Answer 2

#chatBody {
    height: 80px;
    position:relative;
    overflow-y:scroll;
    display: flex;
    min-height: 0;
    flex-direction: column-reverse; /* 'column' for start, 'column-reverse'       for end */
}

<div id="chatBody">
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div><div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
</div>

我使用了flex-direction column-reverse而不是justify-content，因为justify-content可以防止溢出。让我知道是否有帮助。

Flex div不显示溢出滚动条

2 个答案: