html - 我有两列，我希望第二列始终与第一列具有相同的高度

Question

我有两列，我希望第二列始终与第一列具有相同的高度，如果第一列增长或缩小第二列跟随高度（我用javascript得到了这个结果，但我只是想css）

关于如何实现这一目标的任何建议？

function pushInput () {
  var mainColumn = document.querySelector("#main-column");
  var input = document.createElement("input");
  mainColumn.appendChild(input)
};

button {
  font-size: 20px;
  width: 100%
}

.container {
  background: lightblue;
  display: flex;
}

input {
  width: 100%;
}
.item {
  flex-basis: 100%;
  padding: 10px;
}

<section class="container">
  <div class="item" id="main-column">
    <button onclick="pushInput()">+</button>
    <input/>
  </div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

当前情景

所需场景

列增长时的所需场景

标签： htmlcssflexbox

Answer 1

您将能够使用 flexbox 完成此任务！

查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/