是什么破坏了css
>
在进行API调用后，
我在页面中接收并呈现大量图像
因此div不会扩展到覆盖整个背景，但其高度与开始时相同，基本上会发生溢出
我不想通过将溢出设置为滚动来增加滚动条
我想要达到的目标
div以某种方式对新呈现的项作出反应，并相应展开。注
设置高度:自动； width:auto；也不起作用，因为它破坏了其他一些UI组件。
app.css
.App {
background: grey;
height: 100%;
position: absolute;
left: 0;
width: 100%;
}
app.js
import React from 'react';
import './App.css';
import Navbar from './components/UI/Navbar/Navbar'
import Body from './containers/Body/Body'
function App() {
return (
<React.Fragment>
<Navbar />
<div className = "App">
<Body />
</div>
</React.Fragment>
);
}
export default App;
您确定您的div.app对每个图像进行了重新渲染吗？对于一些纯dom元素，如何跳过重新绘制。
如果你对这个东西很确定，试着放一个包装器（比如说另一个div）而不是react.fragment，并用flex-direction:column将它的显示设置为flex；
然后将flex-grow:1添加到div.app，并将flex-shrink:0添加到div.app； 到导航栏（如果dom结构导致收缩）
.Wrapper {
display: flex;
flex-direction: column;
/* set layout viewport to anything that works for you*/
height: 100%
}
.App {
background: grey;
flex-grow: 1;
width: 100%;
/* this part can be based on you layout or replaced with flex-basis instead */
height: 100%;
}
import React from 'react';
import './App.css';
import Navbar from './components/UI/Navbar/Navbar'
import Body from './containers/Body/Body'
function App() {
return (
<div className="Wrapper">
<Navbar style={{ flexShrink: 0 }}/>
<div
className="App"
key="Set to src of image if you want to force re-render for each image"
>
<Body />
</div>
</div>
);
}
export default App;
