嵌套的内联块不会正确换行

Question

Oriol 非常完美地回答了我的问题： 我应该浮动第一个容器，而不是在两个容器上使用内联块，而让第二个容器没有任何特定的样式。同时我应该在主容器和第二个容器上使用 overflow:hidden 以避免在盒子外面笨拙地包装。

原问题

我正在使用响应式布局制作一个非常简单的个人资料页面。配置文件本身包含在固定在屏幕底部的 DIV 中。

在此处查看演示：https://jsfiddle.net/ner8j6vz/

配置文件包含两个容器 DIV，嵌套在一个主容器中：

个人资料图片和带信息的UL（固定宽度）
带有 DIV 的菜单（应随着容器收缩或展开而换行）

容器显示为内联块，带有 white-space:nowrap 以防止它们换行（我想这很明显）。所以容器排列得很好，但现在我有另一个问题 - 第二个容器不遵循主容器的宽度，所以菜单 DIVs 不会像我希望的那样换行。

我认为这应该很简单，但显然不是。当然，很有可能我只是错过了一些关键的东西，现在却因为寻找其他问题而对它视而不见。

我不想通过解释我之前尝试过的内容来混淆问题，但我已经尝试了浮动和内联块的变体，并阅读了十几篇关于浮动和内联块如何使用的文章工作以及如何尝试和处理他们的怪癖。我假设我的问题与第一个容器如何具有静态宽度有关，而第二个容器具有流动宽度，但我不知道如何。

代码：

<div id="maincontainer">
    <div id="subcontainer1">
    </div>
    <div id="subcontainer2">
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
    </div>
</div>

#maincontainer
{
    height:150px;
    display:block;
    vertical-align:top;
    white-space:nowrap;
}
#subcontainer1
{
    width:100px;
    height:100%;
    display:inline-block;
    border:2px solid rgb(240,90,40);
}
#subcontainer2
{
    height:100%;
    display:inline-block;
    vertical-align:top;
}
.menuelement
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:rgb(240,90,40);
}

Answer 1

我建议使用浮动。这样 #subcontainer2 仍然是一个块元素，并调整其宽度以避免溢出 #maincontainer.

#maincontainer {
  height: 150px;
  display: block;
  vertical-align: top;
}
#subcontainer1 {
  width: 100px;
  height: 100%; /* consider `calc(100% - 3px)`,
                   or `box-sizing: border-box`  */
  float: left;
  border: 2px solid rgb(240, 90, 40);
}
#maincontainer, #subcontainer2 {
  overflow: hidden; /* clear float */
}
.menuelement {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: rgb(240, 90, 40);
}

<div id="maincontainer">
  <div id="subcontainer1"></div>
  <div id="subcontainer2">
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
  </div>
</div>

Answer 2

不是积极的，但这就是您要寻找的效果吗？使用浮动可能是要走的路。 https://jsfiddle.net/ner8j6vz/4/

#maincontainer {
overflow:hidden;
width:80%;
height:158px;
}
#subcontainer1 {
float:left;
margin-right:5px;
width:100px;
height:154px;
border:2px solid rgb(240, 90, 40);
}
#subcontainer2 {
height:100%;
vertical-align:top;
}
.menuelement {
display:inline-block;
width:50px;
height:50px;
background-color:rgb(240, 90, 40);
}

嵌套的内联块不会正确换行

Nested inline-blocks won't wrap properly

html

css

responsive-design

原问题