Make Wrapper Take Maximum Width of Child Image

Make wrapper take maximum width of child image?

There is one "hacky" way, using another display property for your wrapper, if you force it to be table and 1% width the img will break that width and set his own size as the width wrapper:

.wrapper {  border: 1px solid red;  display: table;  width: 1%;}

<div class="wrapper">  <img src="http://www.fillmurray.com/284/196">  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>

Controlling width of child of min-width parent

Your first approach might work. It puts the caption out of the figure box, but it does take on the figure width. So adding a background and border to your figcaption might do the trick. And leaving out the border bottom in the figure and the border top in the caption make it look like one box.

figure, figcaption
{
   border:     1px solid blue;
   background: gray;
}

figure
{
   display:             table;
   border-bottom-width: 0;
}

figcaption
{
   display:          table-caption;
   caption-side:     bottom;
   border-top-width: 0;
}

figure img
{
   border:    1px solid green;
   max-width: 100%;
}

See https://jsfiddle.net/xdv02n8e/11/

How to make a child element wider than its parent div, but not fill the entire browser width and be responsive?

Use min() to take the minimum value between 1000px and the screen width (100vw). I am using margin-inline which is as shorthand for left/right margin.

.wrapper {
  max-width: 800px;
  margin:auto;
}

.alignwide {
  margin-inline: calc((100% - min(100vw,1000px)) / 2);
  background: red;
}

<div class="wrapper">
  <div class="alignwide">
    This div expands beyond .wrapper parent margins.
  </div>
</div>

CSS - How to make a div as wide as a containing child img

The reason .gallery__card is wider than gallery__card__imgis because of the text you have in .gallery__card. If you remove the text, it will stay as wide as .gallery__card__img. See here.

You can set you imgs to have width: 100% and remove your static height property like here, but then you have to make sure to maintain aspect ratios of all the images you are using; or you will have differing heights (if that's an issue).

Otherwise, you have to change the way you are constructing your elements.

How to make parent element the same size as his child which is absolutely positioned to his grandparent?

I have no idea why are you making all this complicated. I have changed the code in a simpler form, hope this is what you want. if you want something else specific please do comment.

.grandparent {    display: flex;    align-items: center;    justify-content: center;    height: 650px;    width: 100%;    margin: 0 0 25px 0;    background-color: #464646;    text-align: center;  }
  .parent-wrapper {    display: inline-block;  }    img {   max-width: 100%;  }

<div class="grandparent">  <div class="parent-wrapper">    <img class="child-image" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/co_create/desktop/dropbox_digital_desktop_02-vflq-5NiU.jpg">  </div></div>

Make the parent div width the same as the children

use media queries in the proper way and here you go, to play with it find this fiddle link, try to resize the result window.

.container {
  max-width: 490px;
  margin: 0 auto;
}

.columns {
  display: inline-flex;
  flex-wrap: wrap;
}

.map {
  background-color: cyan;
  width: 150px;
  min-width: 150px;
  height: 150px;
  min-height: 150px;
  margin-right: 20px;
}

.content {
  background-color: lightgray;
  max-width: 320px;
}

.cards {
  display: inline-flex;
  flex-wrap: wrap;
}

.card {
  background-color: pink;
  width: 150px;
  height: 70px;
  display: inline-block;
}

.card.left {
  margin-right: 20px;
}

.texts {
  display: inline-flex;
  flex-wrap: wrap;
}

.text {
  background-color: gold;
  width: 150px;
  height: 200px;
  display: inline-block;
}

.text.left {
  margin-right: 20px;
}
@media(max-width: 520px){
.container {

    display: flex;
      flex-direction: column;
    align-items: center;
}
 .columns {
    display: inline-block;
    
  }
}
@media(max-width: 352px){
.container {

    display: flex;
      flex-direction: column;
    align-items: center;
}
  .map {margin-right: 0;}
 
  .content {
        max-width: min-content;
  }
.card.left {
    margin-right: 0px;
}
.text.left {
    margin-right: 0px;
}
}

<div class="container">
  <div class="columns">
    <div class="map"></div>
    <div class="content">
      <div class="cards">
        <div class="card left">card #1</div>
        <div class="card">card #2</div>
        <div class="card left">card #3</div>
        <div class="card">card #4</div>
      </div>
      <div class="texts">
        <div class="text left">text #1</div>
        <div class="text">text #2</div>
      </div>
    </div>
  </div>
</div>

Make an image width 100% of parent div, but not bigger than its own width

Just specify max-width: 100% alone, that should do it.

Make Wrapper Take Maximum Width of Child Image