css - 弯曲孩子的孩子占据了所有的空间
问题描述
我有 2 个 div 是 flexed 元素的子元素。在其中一个中,我想要另一个 div,它只占用其内容所需的空间。相反,它占用了所有空间。
我究竟做错了什么?
这是我的演示:
.wrapper {
width: 500px;
height: 200px;
display: flex;
flex: 1;
}
.c-1 {
height: 100%;
flex: 3;
background-color: green;
}
.c-2 {
height: 100%;
flex: 1;
background-color: red;
}
.c-1-inner {
height: 100%;
background-color: blue;
}
.box {
height: 15px;
width: 15px;
background-color: yellow;
}
<div class="wrapper">
<div class="c-1">
<div class="c-1-inner">
<div class="box"></div>
</div>
</div>
<div class="c-2"></div>
</div>
解决方案
这是你所追求的行为吗?width: fit-content;
.wrapper {
width: 500px;
height: 200px;
display: flex;
flex: 1;
}
.c-1 {
height: 100%;
flex: 3;
background-color: green;
}
.c-2 {
height: 100%;
flex: 1;
background-color: red;
}
.c-1-inner {
height: 100%;
width: fit-content;
background-color: blue;
}
.box {
height: 15px;
width: 15px;
background-color: yellow;
}
<div class="wrapper">
<div class="c-1">
<div class="c-1-inner">
<div class="box"></div>
</div>
</div>
<div class="c-2"></div>
</div>
推荐阅读
- json - 在 BigQuery 中创建具有 RECORD 类型的列
- javascript - 在终端显示后立即检索输出(Javascript / ShellJS)
- android - 将 firebase 数据放入 recyclerview 时出错,“反序列化时需要一个列表,但有一个类 java.lang.String”
- php - docker上的Nginx,curl获取连接被拒绝
- javascript - Puppeteer 找不到按钮,无法识别加载的网站
- xcode - 打印两个代码之间的比较
- android - 无法在 MacBook 的 Android Studio 中附加调试器
- javascript - 条件不工作的中间件身份验证 Express。节点.js
- c# - PuppeteerSharp - 访问在新选项卡中打开的背景页面,作为常规页面
- google-analytics - 如何在 GA4 中禁用 cookie?