Question

我想要这样的设置：

.---------------.
| .-----------. |
| |  title    | |
| '-----------' |
| .----. .----. |
| | A  | | B  | |
| '----' '----' |
'---------------'

其中title不会推动自己的宽度，而是适应A和B指定的宽度。

我目前有

<div class="row">
    <div class="title">this text needs to break, too long</div>
    <div class="cell"> I am AAAA    </div>
    <div class="cell"> I am BBBB    </div>
</div>

<style>
 .row  {margin: 30px; display: inline-block;}
 .cell {margin: 10px; display: inline-block;}
 .title {overflow: auto; clear:both}
</style>

但是title并没有在这里打破。

Answer 1

Flex 0内部div以阻止它成长。

.outer {
  display: flex;
  justify-content: center;
}

.size-constrain {
  flex: 0;
}

.r { background-color: red }
.b { background-color: blue }
.y { background-color: yellow }

<div class="outer">
    <div class="size-constrain">
        <div class="r">
            Part A
        </div>
        <div class="outer">
            <div class="b" style="width: 100px;">Part B</div>
            <div class="y" style="width: 100px;">Part C</div>
        </div>
    </div>
</div>

如何使div不传播它自己的宽度

1 个答案: