React中如何让子div完全填充父级div？

要让.thread div完全填充它的父容器（宽280px、高320px），只需给这个类添加简单的CSS规则即可——div元素默认高度由内部内容撑开，不会自动占满父容器的高度。

方法1：直接设置宽高为100% #

在你的CSS文件（比如App.css或Thread.css）中添加：

.thread {
  width: 100%;
  height: 100%;
  /* 可选：若需内部内容也自适应填充，可添加以下规则 */
  display: flex;
  flex-direction: column;
}

方法2：使用Flex布局（更灵活） #

通过父容器的flex布局让子元素自动占满空间：

1. 修改App组件里的父div样式：

<div style={{ width: "280px", height: "320px", borderWidth:"5", borderColor:"white", borderStyle: "solid", display: "flex" }}>
  <Thread threadId={"my-thread-id"} />
</div>

2. 给.thread添加CSS：

.thread {
  flex: 1;
  /* 可选：优化内部内容布局 */
  display: flex;
  flex-direction: column;
}

额外提示 #

你原父div设置了borderWidth和borderColor但未添加borderStyle，所以边框不会显示，若需要看到边框，记得补充borderStyle: "solid"（如方法2示例）。

修改后，.thread div就能完全填充父容器的宽高了。

内容的提问来源于stack exchange，提问作者user974809375