Css 如果父元素是弹性元素，则不会显示带有纵横比的空div

.box {
  aspect-ratio: 16/9; 
  background: yellow;
  border: 5px solid red; 
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

<div class="box"></div>
<div class="flex">
  <div class="box"></div>
</div>

no growth + no content = no width

.box {
  aspect-ratio: 16/9; 
  background: yellow;
  border: 5px solid red; 
  margin-bottom: 20px;
  flex-grow: 1; /* NEW */
}

.flex {
  display: flex;
}

<div class="box"></div>
<div class="flex">
  <div class="box"></div>
</div>

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算？

在ReactJS中使用动画在栅格上添加柱

截断风景中的柔子或强制在其自己的线上，如果是肖像

两列网格中左列第一个文本正下方的按钮

如何使用 Ant Design 为不同的屏幕尺寸制作自定义组件样式

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗？

当鼠标移到侧边栏之外时，如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断？

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行？

使用 CSS 定位悬停/弹出 div - 字形浏览器网页

在不使用 position： fixed 的情况下从 CSS 网格中的自动布局中免除子元素？

为什么这个绝对定位的 ：：after 伪元素会崩溃，除非父级有过滤器？

使用 styled-components，我如何定位组件的子类？

CSS中的旋转地球

滚动到该 div 后如何使 div 固定？

css显示：表格不显示边框

无法使用 Bootstrap 3 更改占位符 colored颜色

css 单行或多行垂直对齐

如何在 Firefox 和 Opera 中zoom HTML 元素？

CSS - 悬停穿过元素以激活悬停在被覆盖的元素上

在移动网络上禁用捏zoom