Sylar Sylar - 2 months ago 6
CSS Question

Inline style shortens other divs width

Trying to create an inline style box using Foundation 6 but the width of

product-detail
loss its full width. Why?

HTML: See updated below

<div class="row">
<div class="large-10 large-centered columns">
<div class="box">
<div class="image">
...
</div>
<div class="product-detail">
...
</div>
</div>
</div>
</div>


CSS:

.box{ display: inline-flex }
.product-detail{ left: 20px }


How to get
.image
and
.product-detail
in one line without the loss of the width?

Edit:

Apologies for not being 100% precise.
box
holds the
card
class from bootstrap card. So my exact html looks like this:

<div class="row">
<div class="large-10 large-centered columns">
<div class="box">
<div class="image">
...
</div>
<div class="card">
<div class="card-block">
<div class="product-detail">
...
</div>
</div>
</div>
</div>
</div>
</div>

Answer

You can put .image and .product-detail in one line by making their parent a flex container.

.box { display: flex: }

You can then control the width of each child with the width, flex-basis or flex properties.

Comments