<分区>
html - 使 flexbox 匹配其父级的宽度
我正在努力实现这个特定的设计，但运气不佳:
黑框应该控制#container的宽度(黄色边框)。
然后，#flex 的容器(包含红色 div 的 flexbox)将调整大小以匹配其父级的尺寸。
我想出的代码如下:
#container {
border: 4px solid #f1c40f;
font-family: Tahoma;
color: white;
}
#title {
padding: .5em .75em;
background: #2c3e50;
display: inline-flex;
}
#flex {
display: flex;
}
#icon {
background: #c0392b;
padding: .5em .75em;
}
#content {
background: #e74c3c;
padding: .5em .75em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="title">I should set the width of the container!</div>
<div id="flex">
<div id="icon">
icon
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu eleifend sem. Cras elit odio, faucibus vel tortor nec, lacinia accumsan enim. Aenean eget vulputate ante. Integer quis condimentum magna. Suspendisse potenti. Suspendisse imperdiet eget magna vitae rhoncus. Vestibulum fringilla accumsan accumsan. Duis facilisis lobortis scelerisque. Pellentesque at erat porta, scelerisque nisl in, volutpat sem. Nulla facilisi. Phasellus enim augue, tempus et facilisis id, lobortis eu urna. Aenean volutpat risus dolor, ac volutpat enim euismod ac. Ut id rutrum felis.
</div>
</div>
</div>
</body>
</html>正如您在代码片段中看到的，#flex 使 #container 比应有的更宽。我尝试了 #container {display: inline-flex;}，我尝试应用 flex-basis: 0%; 和 flex-shrink: 1; 给 flexbox 的 child ，但似乎没有什么可以改变这种行为。
如何让 #flex 匹配 #title 的宽度？
谢谢!
最佳答案
也许你应该修改你的容器:
#container {
display:flex;
flex-direction: column;
border: 4px solid #f1c40f;
font-family: Tahoma;
color: white;
}
然后你可以给容器一个宽度。
关于html - 使 flexbox 匹配其父级的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49751212/