CSS:阻止第二个孩子(段落)扩大父对象的宽度 [英] CSS: stop second child (paragraph) from enlarging width of parent

问题描述

我有flexbox盒子列表，盒子的宽度由选择下拉列表和旁边的按钮控制.当我在下面显示错误，并且错误很长时，方框变大了(宽度).参见此 jsFiddle示例.我该如何制止.我希望包装错误并使其与选择+按钮一样宽.它必须仍然是灵活的，因此段落没有最大宽度.而且绝对没有位置.真正的代码也不是jQuery(AngularJS).

I have flexbox list of boxes which width is controlled by select dropdown and button next to it. When I show error(s) below that, and the error(s) are long, the box got enlarged (in width). See on this jsFiddle example. How can I stop that. I want error to wrap and box be as wide as the select+button. It must still be flexible, so no max width for paragraph. And no position absolute. Also the real code is no jQuery (AngularJS).

html:

<div class="container">
  <ul class="items">
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
      </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum .</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
      </div>
    </li>
  </ul>

盒子的CSS:

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display: block;
  padding: 1em;
  margin: 1em;
  border: 1px grey solid;
  background: white;
  flex-grow: 1;
}

推荐答案

如果我是正确的，您只需要将子div换行即可，将下拉列表和按钮分别换成子代1，将错误消息换成子代2，然后换行它们放在带有内联块的父div内.将子级2的 flex-grow 设置为1，并将 width 设置为0，然后将ta-da

If I'm correct, you just need to wrap your children divs which would be the dropdown and button as child 1 and the error message as child 2, wrap them inside a parent div with inline-block. Set the child 2 flex-grow to 1 and width to 0, then ta-da

$("#toggle-errors").on("click", function(){
	$(".errors").toggle();
});

.wrapper > div {
  border: 1px solid tomato;
}

.errors {
  display: flex;
}

.errors p {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display: block;
  padding: 1em;
  margin: 1em;
  border: 1px grey solid;
  background: white;
  flex-grow: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-errors">Toggle Errors</button>
<div class="container">
  <ul class="items">
    <li class="item">
      <h2>Title 1</h2>
           <div class="wrapper">
        <div>
           <select name="item-1-options" id="item-1-options">
              <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
              <option value="2">Lorem ipsum dolor sit amet</option>
              <option value="3">Lorem ipsum dolor</option>
          </select>
          <button>Select</button>
        </div>
      
        <div class="errors">
          <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
        </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
           <div class="wrapper">
        <div>
           <select name="item-1-options" id="item-1-options">
              <option value="1">Lorem ipsum dolor</option>
              <option value="2">Lorem ipsum dolor sit amet</option>
              <option value="3">Lorem ipsum dolor</option>
          </select>
          <button>Select</button>
        </div>
      <div class="errors">
        <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
      </div>
    </li>
    <li class="item">
      <h2>Title 1</h2>
      <div>
        <select name="item-1-options" id="item-1-options">
          <option value="1">Lorem ipsum dolor sit amet, consectetur.</option>
          <option value="2">Lorem ipsum dolor sit amet</option>
          <option value="3">Lorem ipsum dolor</option>
        </select>
        <button>Select</button>
      </div>
    </li>
  </ul>
</div>

这篇关于CSS:阻止第二个孩子(段落)扩大父对象的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！