不允許寬度縮小

Question

編輯：添加小提琴和代碼示例

我有很多列占用的寬度是根據子內容寬度動態計算的。 但是當我使用搜索輸入過濾特定列中的結果時，寬度會跳躍，因為子 div 變得隱藏，因此它們不再需要它們的寬度。

我怎樣才能防止這種情況發生？ 我不能使用固定寬度或最小寬度，因為每一列都是不同的——它們可以而且應該非常寬或非常小。

https://jsfiddle.net/wuvm6f1y/11/

HTML：

<div id="app">
  <span>Type 'bla' and see how first column shrinks</span><br>
  <input type="text" v-model="searchWord" @input="searchRows">
  <div class="columns">
    <div class="column">
      <div class="row" v-for="(row) in rows1" v-show="row.visible">{{row.value}}</div>
    </div>
    <div class="column">
      <div class="row" v-for="(row) in rows2">{{row}}</div>
    </div>
  </div>
</div>

CSS：

.columns {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-right: 1px solid;
  border-top: 1px solid;
  border-left: 1px solid;
}

.row {
  border-bottom: 1px solid;
}

視圖：

new Vue({
  el: '#app',
  data: {
    searchWord: "",
    rows1: [{
        value: "long long long long long row",
        visible: true
      },
      {
        value: "blablabla",
        visible: true
      }
    ],
    rows2: ["short row", "blabla"],
  },
  methods: {
    searchRows: function() {
      this.rows1.forEach((row) => {
        row.visible = true
        if (!row.value.match(this.searchWord)) {
          row.visible = false
        }
      })
    }
  }
})

Answer 1

通過正確使用表格標簽來修復此問題，樣式如此處所述https://www.sitepoint.com/community/t/column-widths-to-auto-adjust-for-text/107326