css - 如何使用 sass/css 将 div 的宽度设置为等于另一个 div？

Question

我有第一个元素:

 <div layout="column" layout-align="start center" class="focusBox flex "></div>

这是CSS:

.focusBox {
 margin-top: 2%;
 border: 1px solid $alto;
 height: calc(100vh - 182px);
 background-color: $white;
}

和第二个元素:

<div flex class="subFolderBox" ></div>

这是CSS:

.subFolderBox {
  margin-bottom: 1%;
  border: 1px solid $alto;
}

如何使用 sass 或 css 将第一个元素的宽度设置为第二个？

Answer 1

您可以将 display: inline-grid 与包装器一起使用。不需要javascript。列完全相等。

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

.wrapper {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
</div>

动态版:

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin: 20px 0;
}

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
</div>

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
  <div class="second_div">A word word word</div>
</div>

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
  <div class="second_div">A word</div>
  <div class="second_div">A word word word</div>
</div>