Set the width of children to fill the parent

Question

I want the children of the div fill its width.

now am using a code like this:

相关标签:

Answer 1

You can make the parent a flexbox and define for the children to grow when there is space available. I removed the width for .child.

.parent {
  width: 100%;
  display: inline-flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  height: 100px;
  background: #ffffd;
  flex-grow: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
</div>