时间戳

首页 > 解决方案 > 在考虑其子项“max-width”的同时扩展“div”

javascript - 在考虑其子项“max-width”的同时扩展“div”

问题描述

我的前端技术很差，我的英文表达也很差。对不起先。

我有这几个divs （一些colors 和margins 被添加为某种视觉辅助）：

<html>
    <header>
        <style>

.outer-container {
    margin: 2px;
    padding: 2px;
    border: 1px deeppink dashed;
}

.inner-container {
    margin: 2px;
    padding: 2px;
    border: 1px deeppink dotted;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.content0 {
    background-color: black;
    color: white;
    border: 1px red solid;
    white-space: nowrap;
}

.content1 {
    max-width: 500px;
    background-color: black;
    color: white;
    flex-grow: 1;
    border: 1px red solid;
    white-space: nowrap;
}

        </style>
    </header>
    <body>
        <div class="outer-container" style="width: 100%" align="center">
            <div class="inner-container">
                <div class="content0">Placeholder</div>
                <div class="content1">Placeholder</div>
            </div>
        </div>
    </body>
</html>

这是我的预期行为：

  1. 具有outer-container某种“外部指定”的宽度（width: 100%在此示例中，但不限于此情况）。
  2. 预计content0将具有显示其内容的最小宽度。预计content1将横向扩展并占据其“容器”的空间，最多500px。
  3. 预计inner-container会扩展并占用其“容器”的空间，同时考虑其子项的最大宽度。在这个例子中，我预计它会扩展直到content1达到它的max-width. 然后，inner-container与 的中心对齐outer-container。

狭隘的情况

图 1：当outer-container是窄inner-container的时候，简单地填充outer-container.

广泛的情况

图 2：当outer-container变宽时，inner-container展开直到它的子节点停止展开，然后inner-container到达 的中心outer-container。这张图片是由 制作的mspaint，我真的不知道如何用 HTML/CSS 来实现它。

但是，我在尝试实施第三项时遇到了麻烦。我尝试了很多组合并再次搜索。但每次尝试，要么inner-container 根本不膨胀，要么inner-container膨胀吞噬outer-container。是否可以使用 HTML 和 CSS（如果确实需要，还可以使用 JavaScript）来实现这一点？如果是这样，怎么办？

标签： javascripthtmlcss

解决方案

我能得到的最接近的是https://jsfiddle.net/ne9phs5y/。

content0and的content1行为符合预期，但不幸的是，它inner-container填充了整个outer-container可能或可能不是问题的内容。最重要的部分是将flex-basis设置为content1500px。

推荐阅读