I want to have a single child item mandate the width for all other elements

Question

In React I have an inline-flex parent element that contains a hyperlinked image and a support email URL. I want the support email URL element's width to MANDATE the width of the parent element and subsequently of the image as well. Meaning all the element width's must be the same as the support element's width.

This is what I have so far but it's not working. I'm not very good at CSS:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const ProviderContainer = styled.div`
    margin: auto
    align-items: center;
    justify-content: center;
    display: inline-flex;
    flex-direction: column;
    font-family: Lato;
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;

    border: 2px solid;
    border-color: #747162;
`;

const ProviderSupport = styled.a`
    margin:10px 0;
    display: inline-table;

    border: 2px solid;
    border-color: #747162;
`

const ImageContainer = styled.div`
    border: 2px solid;
    border-color: #747162;
    flex-basis: 100%
`

const Provider = (props) => (
    <ProviderContainer>
        <ImageContainer>
            <a href={props.ProviderLink}>
                <img style={{width:'100%'}} src={props.ProviderLogo}></img>
            </a>
        </ImageContainer>
        <ProviderSupport href={`mailto:${props.ProviderSupport}`}>{props.ProviderSupport}</ProviderSupport>
    </ProviderContainer>
);

Provider.propTypes = {
    ProviderLink: PropTypes.string,
    ProviderLogo: PropTypes.string,
    ProviderSupport: PropTypes.string
};

export default Provider;

The borders are just so I can get an idea of the box size
This is the issue that can pop up if the image is too big:

Here's a transpiled fiddle example: https://jsfiddle.net/uj5d4621/2/

score 1 · Accepted Answer · answered Jun 29 '20 at 08:54

1

Borrowed from this Q&A

.parent {
  background: pink;
  display:inline-flex;
  flex-direction:column;
  margin:1em;
  vertical-align:top;
}

a, img {
  width:0;
  min-width:100%;
}

<div class="parent">
  <a href="#"><img src="http://www.fillmurray.com/300/200" alt=""></a>
  <div class="description">
    http://www.fillmurray.com/
  </div>
</div>

<div class="parent">
  <a href="#"><img src="http://www.fillmurray.com/300/200" alt=""></a>
  <div class="description">
    http://www.longhyperlinknamegoeshere.com/
  </div>
</div>

answered Jun 29 '20 at 08:54

Paulie_D

107,962
13
142
161

This answer does not work in the fiddle? Think it has to do with the support URL being in a hyperlink element not a div – Izak Joubert Jun 29 '20 at 10:12
Got this to work with some fiddling ;) https://jsfiddle.net/6fhz9mcx/1/ – Izak Joubert Jun 29 '20 at 10:33

score 0 · Answer 2 · answered Jun 29 '20 at 07:03

0

I do not work with react so I have a little trouble reading your code but in my opinion it is enough to add a width to your element.

const ProviderSupport = styled.a`
    margin:10px 0;
    display: block;
    width: 100%;
    border: 2px solid;
    border-color: #747162;
`

answered Jun 29 '20 at 07:03

ag-dev

213
2
12

Nope, that just changes the width of the support element to match the image element – Izak Joubert Jun 29 '20 at 07:05
Can you have an online exemple to show the code, then it would be easier for me to help you. – ag-dev Jun 29 '20 at 07:06
Edited my question with a fiddle – Izak Joubert Jun 29 '20 at 07:25

I want to have a single child item mandate the width for all other elements

2 Answers2