css让元素宽度自动增长，而父宽度自动答案

【问题标题】：css let element width auto grow while parent width autocss让元素宽度自动增长，而父宽度自动
【发布时间】：2017-08-09 16:18:58
【问题描述】：

我有一个这样的html结构和一些基本样式

.container {
  display: block;
  width: auto;
  /* this is must */
  height: auto;
  /* this is must */
  max-width: 300px;
}

.container .row {
  display: flex;
  width: 100%;
  height: auto;
}

.container .row .left {
  display: inline-block;
  width: 100px;
  height: auto;
}

.container .row .right {
  display: inline-block;
  width: auto;
  height: auto;
}

<div class="container">
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

样式可能不起作用，我只粘贴了它的基本部分。我想要实现的是，父元素有一个最大宽度，它包含多行，每行有两个元素，“左”和“右”。我给“左”元素一个固定宽度，给“右”元素一个最小宽度/最大宽度。我希望右元素的宽度随着内容的增长而自动增长，直到最大宽度，但如果内容很短，右元素也应该缩小。我试过桌子和弹性盒子，但没有运气。感谢您的帮助

【问题讨论】：

标签： html css

【解决方案1】：

问题在于您必须为 .right 类指定最大宽度。

1) 整个容器的max-width:300px和left one的width:是100px，所以剩下200px；你可以把它放在右边的行。

2) 添加背景以便更好地理解。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
    .container {
        display: block;
        width: auto; /* this is must */
        height: auto; /* this is must */
        max-width: 300px;
    }
    .container .row{
        display: flex;
        width: 100%;
        height: auto;
        background-color:Red;
    }
    .container .row .left{
        display: inline-block;
        width: 100px;
        background-color:yellow;
    }
    .container .row .right{
        display: inline-block;
        height: auto;
         background-color:green;
         max-width: 200px;
         overflow:hidden;
    }
</style>
<body>

<div class="container">
    <div class="row">
        <div class="left">qweqweqwe</div>
        <div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div>
    </div>
    <div class="row">
        <div class="left">qweqweqwe</div>
        <div class="right">qweqweqwe</div>
    </div>
    <div class="row">
        <div class="left">qweqweqw</div>
        <div class="right">qweqweqweqwe</div>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

在此处查找codepen 示例并根据您的要求进行检查。另外，如果您想从中获得什么，请告诉我。

    .container .row{
        display: flex;
        width: 100%;
        height: auto;
    }
    .container .row .left{
        display: inline-block;
        width: 100px;
        height: auto;
    }
    .container .row .right{
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 150px;
        overflow: hidden;
    }

【讨论】：

【解决方案3】：

将display: flex 添加到您的.row 类并将min-width: 100px 设置为.right - 在此处查看工作jsfiddle：https://jsfiddle.net/o3o9j4za/1/

<div class="container">
<div class="row">
    <div class="left">1234</div>
    <div class="right">4312</div>
</div>
<div class="row">
    <div class="left">1235</div>
    <div class="right">qweqwereqwr</div>
</div>
<div class="row">
    <div class="left">5342</div>
    <div class="right">3g43g3g3g</div>
</div>

.container {
    display: block;
    width: auto; /* this is must */
    height: auto; /* this is must */
    max-width: 300px;
}
.container .row{
    width: 100%;
    height: auto;
    display:flex;
}
.container .row .left{
    display: inline-block;
    height: auto;
    width: 100px;
    background-color:#ff0;
}
.container .row .right{
    display: inline-block;
    width: auto;
    min-width: 100px;
    height: auto;
    background-color:#f0f;
}

请注意，您的弹性容器 (.row) 受 .container 的最大宽度影响。

（编辑：误读了一点 - 应该像你现在想要的那样？）

【讨论】：

【解决方案4】：

这个 flexbox 解决方案怎么样？我认为它最接近您正在寻找的内容：

<div class="container">
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
</div>


.container {
  padding: 2px;
  border: 1px solid green;
  max-width: 300px;
}

.row {
  display: flex;
  padding: 2px;
  border: 1px solid red;
  max-width: 300px;
}

.left {
  padding: 2px;
  border: 1px solid blue;
  width: 100px;
}

.right {
  padding: 2px;
  border: 1px solid purple;
  width: 180px;
}

还有小提琴： https://jsfiddle.net/xr7ebmsz/

【讨论】：

【解决方案5】：

我想你可以为你的班级尝试这个“正确”

.right{
     width:calc(100% - 100px);
 }

【讨论】：