如何解决CSS:防止内容增加父级相对于另一个父级的宽度
在任何事情之前:我不想设置任何固定宽度(例如 600px 等)
注意1:我不希望窗口的宽度被我拥有的户外数量修改 注2:flex-direction 设置为 column,所以 flex-basis 对我不起作用,因为在这种情况下,flex-basis 将处理高度,而不是宽度。
当容器的宽度设置为 100% 时,如何防止内容增加容器的宽度?我希望容器宽度由第二个容器确定,就像在图像上一样:
这是我的代码:
$.when(SpinTimeTotal()).then(function(data)
{
console.log(data);
});
解决方法
Did you mean that?
#desktop {
display: inline-flex;
flex-direction: column;
border: 1px solid #F00;
}
#outdoors {
flex: 1 1 auto;
overflow-x: auto;
border: 2px solid #F60;
}
#windows {
display:flex;
flex: 1 1 100%;
border: 2px solid #0A0;
}
.outdoor {
display: inline-block;
font-size: 50px;
border: 2px solid #00A;
margin: 10px;
}
.window {
font-size: 100px;
border: 2px solid #000;
display: inline-block;
margin: 10px;
flex-grow:inherit;
}
<div id="desktop">
<div id="outdoors">
<div class="outdoor">1</div>
<div class="outdoor">12</div>
<div class="outdoor">123</div>
<div class="outdoor">123</div>
<div class="outdoor">123</div>
<div class="outdoor">123</div>
</div>
<div id="windows">
<div class="window">1</div>
<div class="window">12</div>
<div class="window">123</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。