Question

好吧，在这个小提琴上我有两个与display:flex和flex-grow对齐的div：https://jsfiddle.net/h7bm23ts/2/

＆＃13;

window.longer = function() {
  document.getElementsByClassName("child2")[0].innerHTML += "like this and ";
};

＆＃13;

* {
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box1 {
  background-color: beige;
  height: 300px;
  flex-grow: 2;
}

.box2 {
  background-color: cyan;
  height: 300px;
  flex-grow: 1;
}

.child1 {
  background-color: green;
}

.child2 {
  background-color: gray;
}

＆＃13;

<div class="wrapper">
  <div class="box1">
  some nonsense
  </div>
  <div class="box2">
  longer nonsense <button onclick="window.longer();"> even longer </button>
  <div class="child1">
    this child should be able to expand this div
  </div>
  <div class="child2">
    this child should wrap when too much content is appended
  </div>
  </div>
</div>

＆＃13;

然而，其中一个div中的内容是动态的，当更多内容被附加到它的子div上时，父div会扩展并使框子换行，只需按几下按钮就会破坏布局。

如何让灰色div不再扩展更多内容，并让它简单地接受父母的宽度为＆＃34; strict＆＃34;并包裹在里面？

编辑：我决定https://jsfiddle.net/h7bm23ts/12/。

Answer 1

尝试使用此CSS来满足您的需求：

resources :shares do
  delete on: :collection, action: :destroy_all
end

更多相关信息您可以在此处找到： https://css-tricks.com/flex-grow-is-weird/和此处：https://drafts.csswg.org/css-flexbox/#flex-grow-property，以及 https://drafts.csswg.org/css-flexbox/#flexibility

让孩子不要扩展flexbox div

1 个答案: