CSS:更改子填充会影响父大小(使用box- size : border-box)

Question

我在我的应用程序中使用了react-bootstrap。考虑这样的布局：

​

let changed = false
document.querySelector("#addPadding").onclick = () => {
  const elem = document.querySelector('.input')
  elem.style.paddingRight = changed ? 0 : '2rem'
  changed = !changed
}

* {
  box-sizing: border-box;
}

.body {
  /* Width and height are actually unknown,
     set only for presentation purposes */
  width: 600px;
  height: 200px;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
}

.otherStuff {
  background: aqua;
  margin-right: 2rem;
  max-width: 30%;
}

.form {
  background: palevioletred;
  height: 75%;
  padding: 2rem;
  min-width: 40%;
}

.input {
  width: 100%;
  padding: .2rem;
}

<button id="addPadding">Add padding</button>
<article class="body">
  <div class="otherStuff">Some content of unknown size</div>
  <div class="form">
    <input class="input">
  </div>
</article>

​

如果运行代码片段，您会注意到，每次输入的填充发生变化时，父元素的宽度也会发生变化。而且，并不是所有的视区大小都会发生这种情况:例如，如果.body的宽度为400px或800px，它就可以正常工作。填充大小是由bootstrap在内部更改的，所以我不能真正影响它。即使我能做到，那也会打破其他东西。我能做些什么来防止父母在这里伸展？

Answer 1

考虑使用flex-grow:1将输入作为flex项，而不是width:100%

​

let changed = false
document.querySelector("#addPadding").onclick = () => {
  const elem = document.querySelector('.input')
  elem.style.paddingRight = changed ? 0 : '2rem'
  changed = !changed
}

* {
  box-sizing: border-box;
}

.body {
  /* Width and height are actually unknown,
     set only for presentation purposes */
  width: 600px;
  height: 200px;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
}

.otherStuff {
  background: aqua;
  margin-right: 2rem;
  max-width: 30%;
}

.form {
  background: palevioletred;
  height: 75%;
  padding: 2rem;
  min-width: 40%;
  display:flex;
}

.input {
  flex-grow:1;
  width:0;
  align-self:flex-start;
  padding: .2rem;
  
  background:yellow content-box; /* To illustrate */
}

<button id="addPadding">Add padding</button>
<article class="body">
  <div class="otherStuff">Some content of unknown size</div>
  <div class="form">
    <input class="input">
  </div>
</article>

​