删除内容后如何保持 flex 元素的宽度？

Question

我有这个灵活的布局和一些 JS https://jsfiddle.net/7k8t3xgc/3/

<div class="window">

    <div class="left">
         <div class="optional">optional content</div>
    </div>

    <div class="right">
        <div class="wordpool"></div>
        <div class="category"></div>
    </div>

</div>

.wordpool 元素填充了一些需要通过单击将其移动到.category 元素的单词。

现在发生的情况是，当您单击单词时，.window 元素的宽度正在缩小。有没有办法防止这种行为？我能想到的唯一方法是在渲染时计算字池宽度并将其设置为样式属性，但它在响应性方面存在缺点。

我无法删除 flex 功能，因为左（可选）和右面板需要相同的宽度和居中。

我不能使用静态宽度，因为它需要响应。

它不能像.window { width: 90%; } 这样的东西，因为短内容在宽屏幕上看起来很傻。

我的应用中页面之间的左右内容都会发生变化（想想测验或 Google 表单 - 可以是文本、可以是图像、复选框、单选按钮等），但 HTML 模板是相同的。

Answer 1

由于您希望它是动态的，根据加载时的实际文本宽度，将此行添加到您的脚本中

$(".window").css('min-width', $(".window").width() + 'px');

Updated fiddle

---

您可以这样做，而不是监视较小屏幕的调整大小事件

注意，width: 100%需要使用脚本设置，如果在CSS中设置，计算会出错

$(".window").css({'max-width':$(".window").width() + 'px','width':'100%'});

Updated fiddle 2

Answer 2

只是为了提供另一种解决方案，这可能是也可能不是您想要的：

不要更改容器中的元素，只需将它们放在两个容器上，然后切换不透明度即可。

您可以使用 flexbox 和 order 重新排列它们

var buttons = [{
    name: "lorem"
  },
  {
    name: "ipsum"
  },
  {
    name: "dolor"
  },
  {
    name: "sit"
  },
  {
    name: "amet"
  }
];

$(document).ready(function() {
  for (b of buttons) {
    $('.wordpool').append($("<span>", {
      class: "word",
      id: b.name
    }).html(b.name));
    $('.category').append($("<span>", {
      class: "word hidden",
      id: b.name
    }).html(b.name));
  }

  $(".wordpool").on("click", "span", function() {
    $(this).toggleClass('hidden');
    $(".category #" + $(this).attr('id')).toggleClass('hidden');
  });

  $(".category").on("click", "span", function() {
    $(this).toggleClass('hidden');
    $(".wordpool #" + $(this).attr('id')).toggleClass('hidden');
  });

  $("body").on("click", ".showoptional", function() {
    $(".left").toggle();
  });

});

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4efdc;
}

.showoptional {
  position: absolute;
  top: 5px;
  left: 5px;
}

.window {
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  display: flex;
}

.left,
.right {
  padding: 20px;
  flex: 1 0 0px;
}

.left {
  display: none;
}

.optional {
  background: #eee;
  text-align: center;
  padding: 50px 0;
}

.word {
  display: inline-block;
  margin: 2px 5px;
  padding: 3px 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.hidden {
  opacity: 0;
  order: 99;
}

.wordpool {
  text-align: center;
  display: flex;
}

.category {
  margin-top: 10px;
  border: 1px solid #ccc;
  min-height: 60px;
}

.category .word {
  display: block;
  text-align: center;
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <input type="button" class="showoptional" value="Trigger optional content" />

  <div class="window">

    <div class="left">
      <div class="optional">optional content</div>
    </div>

    <div class="right">
      <div class="wordpool"></div>
      <div class="category"></div>
    </div>

  </div>

</div>