Question

所以我对flexbox有一种奇怪的行为。我正在尝试制作与this fiddle中显示的内容完全相同的内容。

哪种方法很完美，但是当我在自己的服务器上运行相同的代码时，它会这样做：

如您所见，背景颜色表示包含的div只是填充的大小。我已经尝试了所有我能想到的东西，使其扩展以适应内容，但它不起作用。

一个线索是，当我压扁页面时，包装将右侧框放在左侧顶部，它们看起来都很好：

这正是我想要的。

一个html示例：

<div id="objectives_frontpage">

<div id="objectives_infopanel">
    <div id="objectives_title">The topic name</div>
    <div id="objectives_description">A description of the stuff...</div>
</div>

<div id="objectives_frontpage_info">

        <div id="objectives_objectivepanel">
        <div class="objectives_objective objectives_level_1">
            <div class="objectives_objective_title">Recall common examples of fluids and non-fluids.</div>
            <div class="objectives_objective_level">Level 1</div>
            <div class="objectives_objective_description">Give a few examples of fluids and a few examples of non-fluids.</div>
            <div class="objectives_objective_assessbar">
                <div class="objectives_objective_selfassess objectives_objective_1">1</div>
                <div class="objectives_objective_selfassess objectives_objective_2">2</div>
                <div class="objectives_objective_selfassess">3</div>
                <div class="objectives_objective_selfassess">4</div>
                <div class="objectives_objective_selfassess">5</div>
            </div>
        </div>

        <div class="objectives_objective objectives_level_2">
            <div class="objectives_objective_title">Recall common examples of fluids and non-fluids.</div>
            <div class="objectives_objective_level">Level 1</div>
            <div class="objectives_objective_description">Give a few examples of fluids and a few examples of non-fluids.</div>
            <div class="objectives_objective_assessbar">
                <div class="objectives_objective_selfassess objectives_objective_1">1</div>
                <div class="objectives_objective_selfassess objectives_objective_2">2</div>
                <div class="objectives_objective_selfassess objectives_objective_3">3</div>
                <div class="objectives_objective_selfassess">4</div>
                <div class="objectives_objective_selfassess">5</div>
            </div>
        </div>
        </div>

        <div id="objectives_leaderboard">
            Nothing here yet...
        </div>
</div>

</div>

和CSS：

#objectives_frontpage { margin: 20px 5px 20px 5px; display: flex; flex-direction: column; flex-wrap: nowrap; }  
#objectives_infopanel { height: auto; } 
#objectives_title { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; }  
#objectives_description { padding: 5px; color: black; text-shadow: 1px 1px white; } 
#objectives_frontpage_info { flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; }
   #objectives_objectivepanel { display: flex; flex-direction: row; flex-wrap: wrap; flex: 1; } 
   #objectives_leaderboard { flex: 1; } 

.objectives_objective { flex: 1; padding: 5px; margin: 5px; }
.objectives_level_1 { background: #00CC33; }
.objectives_level_2 { background: #009900; }
.objectives_level_3 { background: #CCCC00; }
.objectives_level_4 { background: #999900; }
.objectives_level_5 { background: #CC6600; }
.objectives_level_6 { background: #FF3333; }
.objectives_level_7 { background: #990000; }

.objectives_objective_title { display: flex; font-size: 20px; font-weight: bold; color: white; text-shadow: 3px 3px black; padding: 5px; }
.objectives_objective_level { display: flex; font-size: 12px; padding: 5px; background: rgba(255, 255, 255, 0.5); color: white; text-shadow: 1px 1px black; }
.objectives_objective_description { display: flex; font-size: 12px; color: white; text-shadow: 1px 1px black; padding: 5px; margin-bottom: 10px; }

.objectives_objective_assessbar { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 5px; }
.objectives_objective_selfassess { display: flex; flex: 1; justify-content: center; align-items: center; font-size: 20px; height: 50px; color: white; background: rgba(255, 255, 255, 0.5); margin: 0px 1px 0px 1px; }
.objectives_objective_selfassess:hover { cursor: pointer; color: black; }

.objectives_objective_1 { background: #00CC33; }
.objectives_objective_2 { background: #999900; }
.objectives_objective_3 { background: #CC6600; }
.objectives_objective_4 { background: #FF3333; }
.objectives_objective_5 { background: #990000; }

感谢您的帮助：）

Answer 1

所以这个容器有一个虚假的标准，它在页面上伸展，然后最终放在它下面，这意味着它无法扩展到空间。

我把这个代码放在那个容器里，然后将每个目标设置为flex：1;它起作用了。

感谢karolas要求提供更多信息，我发现这是在制作我做过的最大小提琴的过程中 - 需要更多的鸭子调试。

Flexbox在包裹之前不会达到高度

1 个答案: